如何在我的库中声明/包含一个导入的 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 中引用它。

这对我来说绝对是一个痛苦的过程，所以我希望这会有所帮助。