通过使用 ng-packagr 向 ng-package.json 添加“资产”，全局样式不会应用于 Angular 库答案

【问题标题】：Global styles are not being applied to Angular library by adding "assets" to ng-package.json with ng-packagr通过使用 ng-packagr 向 ng-package.json 添加“资产”，全局样式不会应用于 Angular 库
【发布时间】：2021-09-18 16:03:30
【问题描述】：

我正在开发一个带有故事书的 Angular 库（版本 9.1.11），我想在其中全局添加样式。我知道对于ng-packagr 9.x 及更高版本，作为构建过程的一部分，可以将资产复制到您的库包中以全局添加样式。

"ng-packagr:" "~9.1.5" 已经在我的 package.json 中的 devDependencies 中，所以我没有重新安装它。

我所做的如下：我在库的根目录中创建了 global.scss 文件。我将“资产”添加到我的ng-package.json，以我的global.scss 文件为目标。我在global.scss 文件中添加了样式。我运行了一个 npm run build 以将 global.scss 文件复制到我的 dist 文件夹中。

之后，我的 global.scss 文件中的样式不会应用到我的库中。

我遗漏了什么，为什么样式没有在全球范围内应用？以及如何使用ng-packagr 正确地将样式全局添加到我的库中？

这是我库中的文件的样子：

这是我的ng-package.json 的样子：

    {
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/angular-components",
  "assets": ["./global.scss"], <- ADDED HERE
  "lib": {
    "entryFile": "src/public_api.ts",
    "umdModuleIds": {
      "color": "color",
      "uuid": "uuid"
    }
  },
  "whitelistedNonPeerDependencies": [
    "color",
    "tslib",
    "uuid"
  ]
}

【问题讨论】：

标签： angular storybook angular-library ng-packagr

【解决方案1】：

这个问题将在 6.4 中由 PR 解决

目前有一种解决方法。

创建一个应用程序让故事书加载到 angular.json 中

tsconfig.json 需要指向正确的。

"storybook": {
  "projectType": "application",
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "tsConfig": "tsconfig.json",
        "styles": [
            // Add your global stylesheets
        ],
        "scripts": []
      }
    }
  }
}

source

我将它与我的 NX 项目一起使用，效果很好。

【讨论】：

【解决方案2】：

尝试在 ng-package.json 中添加这个：

"lib": {
      "cssUrl": "inline"
    }

并从您的组件样式中包含 global.scss。不过我建议你用你的风格创建一个新的库并导入它。

【讨论】：