库的stylePreprocessorOptions，我应该在哪里放置angular.json? [英] stylePreprocessorOptions for libraries, where should I put in in angular.json?

问题描述

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

I'm trying to use stylePreprocessorOptions in order to include a path to my variables folders for a library project like so :

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

然后我在scss文件中使用 @import'colors'; .但这在进行 ng服务时不起作用:

Then I use @import 'colors'; within the scss file. But it doesnt work while doing ng serve :

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

这是angular.json中的完整库:

Here is the full library in 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 ?

How can I use stylePreprocessorOptions in a library in Angular?

谢谢！

推荐答案

不在angular.json中.

Not in angular.json.

在librairies的ng-package.json

Include the path to your scss folder with styleIncludePaths in the librairies' ng-package.json

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

最终从引用的 scss 文件夹中导入文件，没有前缀路径，如下所示:

finally import the files from the referenced scss folder without prefix path as follows

@import "filename";

这篇关于库的stylePreprocessorOptions，我应该在哪里放置angular.json?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！