如何将全局样式添加到 Angular 6/7 库

Question

我试图以与 Angular 应用程序相同的方式添加全局样式，但它完全不起作用。

我的库的名称是 example-lib ，所以我将 styles.css 添加到 /projects/example-lib/ 。我在主要 angular.json 文件中添加了样式：

 ...
"example-lib": {
  "root": "projects/example-lib",
  "sourceRoot": "projects/example-lib/src",
  "projectType": "library",
  "prefix": "ngx",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/example-lib/tsconfig.lib.json",
        "project": "projects/example-lib/ng-package.json",
        "styles": [
          "projects/example-lib/styles.css" <!-- HERE
        ],
      },
...

但是当我尝试使用命令构建库时：

ng build example-lib

我收到错误：

   Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles)

我想这是在单独的库中添加全局样式的另一种方法。任何人都可以帮助我吗？

原文由 Jaroslaw K. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1-确保将样式放入库中

例子：

项目/您的库名称/资产/styles.css

2-然后在您的 ng-package.json 中（肯定在库中）放置 assets 规则

    {
      "$schema": ...  ,
      "dest": ...   ,
>     "assets": [
>         "./assets/*"
>       ],
      "lib": ...
    }

3-在您的应用程序中，您可以使用此资产

  "styles": [
              "../your-lib-name/assets/styles.css"
            ]

这是一个教程

原文由 ahmad-g-mustafa 发布，翻译遵循 CC BY-SA 4.0 许可协议