全局样式没有通过使用ng-packagr将"assets“添加到ng-package.json来应用于Angular库

Question

我正在开发一个带有storybook的angular库(版本9.1.11)，我想在其中添加全局样式。我知道对于ng-packagr版本9.x和更高版本，可以将资源复制到库包中，作为构建过程的一部分，以全局添加样式。

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

我所做的如下:我在我的库的根目录中创建了global.scss文件。我针对我的global.scss文件在ng-package.json中添加了"assets“。我在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"
  ]
}

Answer 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项目中使用了它，它工作得很好。

Answer 2

尝试在ng-package.json中添加以下内容：

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

并包含组件样式中的global.scss。然而，我建议你用你的风格创建一个新的库，并导入这个库。