库的 stylePreprocessorOptions，我应该在 angular.json 中的哪个位置？答案

【问题标题】：stylePreprocessorOptions for libraries, where should I put in in angular.json?库的 stylePreprocessorOptions，我应该在 angular.json 中的哪个位置？
【发布时间】：2021-12-23 18:39:31
【问题描述】：

我正在尝试使用 stylePreprocessorOptions 来包含我的变量文件夹的路径用于库项目，如下所示：

"stylePreprocessorOptions": {
  "includePaths": [
    "styles/variables"
  ]
}

然后我在 scss 文件中使用@import 'colors';。但是在做ng serve时它不起作用：

@import 'colors';
       ^
      Can't find stylesheet to import.

这是 angular.json 中的完整库：

        "ui-table": {
            "root": "libs/ui/table",
            "sourceRoot": "libs/ui/table/src",
            "projectType": "library",
            "prefix": "xxx",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-ng-packagr:build",
                    "options": {
                        "tsConfig": "libs/ui/table/tsconfig.lib.json",
                        "project": "libs/ui/table/ng-package.json",
                        "stylePreprocessorOptions": {
                            "includePaths": [
                                "styles/variables"
                            ]
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": ["libs/ui/table/tsconfig.lib.json"],
                        "exclude": ["**/node_modules/**"]
                    }
                }
            },
            "schematics": {
                "@nrwl/schematics:component": {
                    "styleext": "scss"
                }
            }
        },

如何在 Angular 的库中使用 stylePreprocessorOptions？

谢谢！

【问题讨论】：

标签： angular

【解决方案1】：

不在 angular.json 中。

在库的 ng-package.json 中包含 scss 文件夹的路径和 styleIncludePaths

"lib": {
    "entryFile": "src/public-api.ts",
    ...
    "styleIncludePaths": [
        "relative/path/to/scss/folder"
    ]
    ...
}

最后从引用的scss文件夹中导入文件，不带前缀路径如下

@import "filename";

【讨论】：

@GreatHawkeye 如果它像我一样解决了您的问题，请接受它作为正确答案。

【解决方案2】：

接受的答案对我使用 Angular v9 无效。

但是这样做了：

{
  "ngPackage": {
    "lib": {
      "styleIncludePaths": ["./src/assets/styles"]
    }
  }
}

【讨论】：

【解决方案3】：

我有一个升级到 Angular 12 的库，使用 ng-packagr 编译，但内部还有一个演示项目（即展示组件的迷你应用程序）。
我们使用 dart-sass（Angular 现在默认）。

我有深度导入，例如：@import '../../../../layout/src/lib/form-label.mixins';

我刚刚将它们替换为 @import 'layout/src/lib/form-label.mixins'; 并且它起作用了，其中layout 位于项目的根目录：库由子包组成。

我尝试这样做是因为 Angular 不喜欢在 angular.json 中声明 styleIncludePaths，而且我们的项目中没有 ng-package.json。

注意：IIRC，它在以前版本的 Angular 中不起作用。

【讨论】：