如何在我的庫中聲明/包含一個導入的 scss 文件夾，以便可以在我的應用程序的 scss 文件中調用 @import 它？

Question

賞金將在 2 天內到期。 此問題的答案有資格獲得+500聲望賞金。 doppelgreener正在尋找這個問題的更詳細的答案：

我仍然不知道如何在 Angular 庫的 scope 中使用 stylePreprocessorOptions 或 styleIncludePaths。 通過所有嘗試，styleIncludePaths 似乎根本沒有做任何事情。

目標：

我正在嘗試從我的庫中包含一個路徑，以便我可以使用@import語句在我的應用程序中包含 scss 文件，如下所示：

@import "some-scss-in-my-lib"

問題：

不幸的是，每次我嘗試為我的應用程序提供服務時，我都會收到以下編譯器錯誤：

SassError: Can't find stylesheet to import.

我已經嘗試過的：

• 在 Stackoverflow 上查找搜索給我帶來了這個線程，它描述了與我現在面臨的相同問題。 並且我嘗試像Zainu建議的那樣將路徑包含在styleIncludePaths屬性中，但是在嘗試為應用程序提供服務時，我遇到了上面“問題 -部分”中描述的確切問題。

• 我嘗試在第一篇文章中設置stylePreprocessorOptions屬性，如GreatHawkeye ，並且可以在使用ng build后@import scss 文件，但我不明白這對stylePreprocessorOptions而不是styleIncludePaths的工作方式和原因？

• 我還嘗試在 google 上搜索，這導致我使用 styleIncludePaths 選項找到了 Thread Unable to get styles 捆綁，我在其中找到了Alan Aguis的答案，但不幸的是沒有真正的解釋 styleIncludePaths 的真正用途。 Alan Aguis 唯一說的就是：

那是因為 styleIncludePaths 縮進了別的東西。

但正如所說，他沒有說明 styleIncludePaths 到底是什么，這讓我更加困惑。

我還嘗試查找有關在線程上添加樣式包含路徑如何使用“styleIncludePaths”的文檔的ng-packagr github 頁面，但結果仍然相同，我找不到我的問題的明確答案。

關於這個問題的問題：

1. ng-package.json 中的 styleIncludePaths 什么時候使用？ 它僅用於已發布的軟件包嗎？

2. angular.json 中的 stylePreprocessorOptions 何時使用？ 只有在運行 ng build 后才用於dist版本嗎？

3. 一般來說，ng-package.json 的 styleIncludePaths 與 angular.json 的 stylePreprocessorOptions 有什么區別？

4. 如何在我的庫中聲明/包含一個導入的 scss 文件夾，以便可以在我的應用程序的 scss 文件中調用 @import 它？

我很確定我的建議是錯誤的，但我想知道發生了什么以及如何解決我的問題。

對此的任何幫助一如既往地受到高度贊賞！

Answer 1

正如在github上回答的那樣， 我引用 alan-agius4 ：

CSS 處理器在構建庫期間使用包含路徑來解析處理 scss/less/stylus 文件時的導入。 在您的未處理 scss 文件中，這些路徑需要包含在應用程序級別而不是庫級別，因為此類文件不會由庫構建管道處理，而是由應用程序處理。 它們只是被復制為 static 文件。 如果您不想在應用程序級別包含此類路徑，您可以利用 webpack 的波浪號導入語法，例如：

@import "~/my-lib/scss/mixins”.

注意：webpack 特定功能不受 Angular 工具團隊的官方支持，可能會在沒有警告的情況下中斷。

Answer 2

我之前嘗試過聽起來與您的設置非常相似的設置，這導致了大量的研究和反復試驗。 從我嘗試過的所有事情來看，它基本上都是煮熟的：

styleIncludePaths 用於構建庫，stylePreprocessorOptions 路徑用於構建/服務 angular 應用程序。

這將取決於您的項目的設置，但如果您的庫是在您的應用程序之外配置的，然后您在沒有單獨構建的情況下導入到您的應用程序中，那么 stylePreprocessorOptions 將用作該庫的樣式導入路徑。 即使它是在您的應用程序外部配置並具有已定義的 ng-package 文件，如果您只是在本地導入它，angular 會將其視為與應用程序內部已經存在的任何其他組件/模塊相同，並且需要使用stylePreprocessorOptions 來解析任何 scss 導入路徑。

另一方面，如果您要單獨構建庫，然后拉入該構建的庫，則 styleIncludePaths 將用於在單獨構建該庫時解析任何 scss 導入路徑。

我不一定會說這是兩者之間的“差異”。 它們都用於提供解析 scss 導入的基本路徑的相同目的，但 styleIncludePaths 是構建庫時庫的 ng-package 文件中的語法，而 stylePreprocessorOptions 是構建 angular 應用程序時的語法。

至於您關於如何“在我的庫中聲明/包含導入的 scss 文件夾以便我可以在我的應用程序的 scss 文件中調用 @import 它”的最后一個問題，我無法制定出更優雅的解決方案，所以他們只能這樣可以讓這種類型的設置工作是在我正在處理的應用程序/庫之外擁有我想要的樣式表，只需配置 styleIncludePaths 和 stylePreprocessorOptions 以引用相同的文件。 這樣，我的樣式表就有了一個來源，我可以在 styleIncludePaths 和 stylePreprocessorOptions 中引用它。

這對我來說絕對是一個痛苦的過程，所以我希望這會有所幫助。