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

【问题标题】：How do I declare/include an imported scss folder in my library so I can call @import it in my application's scss files?如何在我的库中声明/包含一个导入的 scss 文件夹，以便可以在我的应用程序的 scss 文件中调用 @import 它？
【发布时间】：2020-12-06 11:29:51
【问题描述】：

目标：

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

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

问题：

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

SassError: Can't find stylesheet to import.

我已经尝试过的：

在 Stackoverflow 上查找搜索给我带来了 this thread，它描述了与我现在面临的相同问题。而且我尝试将路径包含在 styleIncludePaths 属性中，就像建议的 Zainu 一样，但是在尝试为应用程序提供服务时，我遇到了 The Problem 中描述的确切问题 -上一节。
我尝试在第一篇文章中将stylePreprocessorOptions 属性设置为GreatHawkeye，并且可以在使用ng build 后设置@import scss 文件，但我不明白这是如何以及为什么适用的stylePreprocessorOptions 但不是styleIncludePaths？
我还尝试在 google 上搜索，这导致我找到了 Unable to get styles bundled using styleIncludePaths option 的线程，在那里我找到了 Alan Aguis 的答案，但不幸的是，没有真正解释 styleIncludePaths 的真正用途。 Alan Aguis 唯一说的就是：

那是因为 styleIncludePaths 缩进了别的东西。

但如前所述，他没有说明 styleIncludePaths 到底是什么，这让我更加困惑。

我还尝试在How to use "styleIncludePaths" 线程上查找有关Add Style Include Paths 的文档的ng-packagr github page，但结果仍然相同，我找不到问题的明确答案。

关于此问题的问题：

ng-package.json 中的 styleIncludePaths 什么时候使用？它仅用于已发布的包吗？
angular.json 中的 stylePreprocessorOptions 什么时候使用？ dist 版本是在运行 ng build 后才使用的吗？
ng-package.json 中的 styleIncludePaths 与 angular.json 中的 stylePreprocessorOptions 有什么区别？
如何在我的库中声明/包含一个导入的 scss 文件夹，以便在我的应用程序的 scss 文件中调用 @import？

我很确定我的建议是错误的，但我想知道发生了什么以及如何解决我的问题。

对此的任何帮助一如既往地受到高度赞赏！ ??????????

【问题讨论】：

标签： angular sass ng-packagr angular-json

【解决方案1】：

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

styleIncludePaths 用于构建库，stylePreprocessorOptions 路径用于构建/服务 Angular 应用程序。

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

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

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

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

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

【讨论】：

【解决方案2】：

正如github、I quote alan-agius4 上的回答：

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

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

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

【讨论】：