如何在 Angular 8 库中包含 SASS 样式答案

【问题标题】：How to include SASS styles in an angular 8 library如何在 Angular 8 库中包含 SASS 样式
【发布时间】：2019-08-09 03:10:32
【问题描述】：

我有一个 Angular 库，用于在两个项目之间共享一些组件、指令等。

最近我尝试在库中包含一些样式以在两个项目中重用，但我可以实现 ng build 将其包含在包中。

¿有什么线索吗？

【问题讨论】：

标签： angular angular8 angular-library

【解决方案1】：

到目前为止，我发现的唯一方法是在打包 .tgz 以供内部使用之前，运行一个 npm 脚本来复制 dist 文件夹中的 sass 文件（使用 copyfiles）。

这是我的 package.json：

{
...
     "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "uiutils_build": "ng build my-library",
        "uiutils_styles": "copyfiles -f projects/my-library/src/scss/*.scss dist/@my-namespace/my-library/scss",
        "uiutils_pack": "cd dist/@my-namespace/my-library && npm pack",
        "uiutils_copy": "copyfiles -f dist/@my-namespace/my-library/*.tgz ../infraestructure.tourbitz.com/packages/@my-namespace/my-library",
        "uiutils_package": "npm run uiutils_build && npm run uiutils_styles && npm run uiutils_pack && npm run uiutils_copy"
      },
...
}

重要的脚本是 uiutils_styles。

¿如何使用？

在我的样式文件中，我包含了样式：

@import "~@my-namespace/ui-uitils/scss/my_style.scss";

为了注册全局样式，我在 angular.json 文件的项目部分做了：

{
... 
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
"styles": [
              "node_modules/@my-namespace/my-library/scss/my_style.scss",
              "src/styles.scss"
            ],
...
},
...
}

【讨论】：

【解决方案2】：

Angular 9 更新：

在库中，在lib-目录旁边，创建一个styles-目录，然后将其作为资产添加到ng-rollout.yaml，如下所示：

"assets": [
  "styles/**/*.scss"
]

这会将在 styles 目录中递归找到的所有 SCSS 文件复制到库输出目录中的 styles 目录中。

【讨论】：