如何在我的库中 declare/include 一个导入的 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?

目标:

我正在尝试从我的库中包含一个路径,这样我就可以使用 @import 语句将 scss 文件包含在我的应用程序中,如下所示:

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

问题:

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

SassError: Can't find stylesheet to import.

我已经尝试过的:

that is because styleIncludePaths is indented for something else.

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

我也尝试查找 ng-packagr github page regarding the documentation about Add Style Include Paths on the Thread How to use "styleIncludePaths",但结果还是一样,我找不到问题的明确答案。

关于这个问题的问题:

  1. ng-package.json中的styleIncludePaths什么时候使用?它仅用于已发布的包吗?

  2. 什么时候使用angular.json中的stylePreprocessorOptions? dist 版本只在 运行 ng build 之后使用吗?

  3. 与来自 angular.json 的 stylePreprocessorOptions 相比,ng-package.json 的 styleIncludePaths 通常有什么区别?

  4. 如何在我的库中 declare/include 一个导入的 scss 文件夹,以便我可以在我的应用程序的 scss 文件中调用 @import 它?

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

一如既往地非常感谢对此的任何帮助!

如在 github, I quote alan-agius4 上的回答:

The includes paths are used by CSS processors during the build of a library to resolve imports when processing scss/less/stylus files. In your ship unprocessed scss files, these paths will need to be included at application level instead of the library level, because such files will not be handled by the library build pipeline, but the application’s. They are just copied as static files. In case you don’t want to include such paths at application level, you can leverage webpack’s tilde import syntax ex:

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

Note: webpack specific features are not official supported by the Angular tooling team and might break without warning.

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

构建库时使用 styleIncludePaths,building/serving angular 应用程序时使用 stylePreprocessorOptions 路径。

这取决于您项目的设置,但如果您的库是在您的应用程序外部配置的,然后您在没有单独构建的情况下导入到您的应用程序中,则 stylePreprocessorOptions 将用作该项目的样式导入路径图书馆。即使它是在你的应用程序之外配置的并且有一个定义的 ng-package 文件,如果你只是在本地导入它,angular 将把它与应用程序内部已有的任何其他 component/module 一样对待并且需要使用 stylePreprocessorOptions 来解析任何 scss 导入路径。

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

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

至于你的最后一个问题,关于如何“declare/include 在我的库中导入一个 scss 文件夹,以便我可以在我的应用程序的 scss 文件中调用 @import 它”,我无法找到更优雅的方法解决方案,所以他们唯一能让这种设置起作用的方法是在我正在处理的 app/library 之外获得我想要的样式表,并且只需配置 styleIncludePaths 和 stylePreprocessorOptions 以引用相同的文件。这样我就有了一个样式表来源,我可以在 styleIncludePaths 和 stylePreprocessorOptions 中引用它。

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