如何在库中声明/包含导入的 scss 文件夹，以便可以在应用程序的 scss 文件中调用 @import？

Question

目标：

我正在尝试从我的库中包含一个路径，以便我可以使用一个@import语句在我的应用程序中包含 scss 文件，如下所示：

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

问题：

不幸的是，每次我尝试为我的应用程序提供服务时，我都会收到以下编译器错误：

SassError: Can't find stylesheet to import.

我已经尝试过的：

• 在 Stackoverflow 上查找搜索给我带来了这个线程，它描述了与我现在面临的相同问题。而且我已经尝试styleIncludePaths像Zainu建议的那样包含属性的路径，但是在尝试为应用程序提供服务时，我遇到了上面“问题”部分中描述的确切问题。

• 我试图在第一篇文章中设置stylePreprocessorOptions像GreatHawkeye这样的属性，并且可以@import在使用后设置 scss 文件ng build，但我不明白这是如何以及为什么会起作用，stylePreprocessorOptions但不是styleIncludePaths？

• 我还尝试在 google 上搜索，这使我找到了 Thread Unable to get styles bundled using styleIncludePaths 选项，在那里我找到了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

我之前尝试过听起来与您的设置非常相似的设置，这导致了大量的研究和反复试验。从我尝试过的一切来看，它基本上完成了：

styleIncludePaths 在构建库时使用， stylePreprocessorOptions 路径在构建/服务角度应用程序时使用。

这取决于项目的设置，但如果您的库是在应用程序外部配置的，然后导入到应用程序中而不单独构建，则 stylePreprocessorOptions 将用作该库的样式导入路径。即使它是在应用程序外部配置的并且具有定义的 ng-package 文件，如果您只是在本地导入它，Angular 也会将其视为应用程序内部已有的任何其他组件/模块，并且需要使用stylePreprocessorOptions 解析任何 scss 导入路径。

另一方面，如果您要单独构建库，然后引入该构建的库，则在单独构建该库时， styleIncludePaths 将用于解析任何 scss 导入路径。

我不一定会说两者之间存在“差异”。它们都具有相同的目的，即提供解析 scss 导入的基本路径，但 styleIncludePaths 是构建该库时库的 ng-package 文件中的语法，而 stylePreprocessorOptions 是构建角度应用程序时的语法。

至于你关于如何“在我的库中声明/包含导入的 scss 文件夹，以便我可以在我的应用程序的 scss 文件中调用 @import 它”的最后一个问题，我无法制定出更优雅的解决方案，所以他们只是我的方法可以让这种类型的设置工作是在我正在处理的应用程序/库之外拥有我想要的样式表，并且只需配置 styleIncludePaths 和 stylePreprocessorOptions 来引用相同的文件。这样我的样式表就有了一个来源，我可以在 styleIncludePaths 和 stylePreprocessorOptions 中引用它。

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

Answer 2

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

\n

\n

CSS 处理器在构建库期间使用包含路径来解析处理 scss/less/stylus 文件时的导入。\n在您的未处理的 scss 文件中，这些路径需要\n包含在应用程序级别而不是库级别，因为\n此类文件不会由库构建管道处理，而是由应用程序\xe2\x80\x99s 处理。它们只是作为静态文件复制。\n如果您不想\xe2\x80\x99 在应用程序级别包含此类路径，\n可以利用 webpack\xe2\x80\x99s 波形符导入语法，例如：

\n

\n

@import "~/my-lib/scss/mixins\xe2\x80\x9d.\n

\n

\n

注意：webpack 的特定功能并未得到 Angular 工具团队的官方支持，并且可能会在没有警告的情况下中断。

\n

\n