时间戳

首页 > 解决方案 > 通过使用 ng-packagr 向 ng-package.json 添加“资产”，全局样式未应用于 Angular 库

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

问题描述

我正在开发一个带有故事书的角度库（版本 9.1.11），我想在其中全局添加样式。我知道对于ng-packagr9.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"
  ]
}

标签： angularstorybookangular-libraryng-packagr

解决方案

此问题将在 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": []
      }
    }
  }
}

资源

我将它与我的 NX 项目一起使用，它运行良好。

推荐阅读