10

目标：

我正在尝试从我的库中包含一个路径，这样我就可以使用一个@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 它？

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

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

4

2 回答 2

5

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

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

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

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

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

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

在此处输入图像描述

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

于 2021-10-24T04:21:42.277 回答
4

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

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

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

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

于 2020-08-24T12:30:04.940 回答