如何在库 angular 中使用 scss 文件创建组件答案

【问题标题】：How to create component with scss files in library angular如何在库 angular 中使用 scss 文件创建组件
【发布时间】：2021-08-03 17:14:08
【问题描述】：

我创建了一个 scss 应用并关联了一个库。我想在这个库中创建带有 .scss 文件的组件。但是当我在库中创建一个组件时，angular会自动为其分配一个css文件。

我使用 scss 选项创建了应用程序（名为 vega-libraries），但没有使用库（polaris-common）

这是带有树视图的项目截图，我尝试将totoComponent的css文件更改为toto.scss，如截图所示。

但是当我这样做时，它会产生这种类型的错误：

错误：加载程序“C:/Users/........toto/toto.component.css”没有返回字符串。

如何在我的库中使用有效的 .scss 文件创建组件？

感谢您的帮助

编辑：

 "polaris-common": {
      "projectType": "library",
      "root": "projects/polaris-common",
      "sourceRoot": "projects/polaris-common/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/polaris-common/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/polaris-common/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/polaris-common/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/polaris-common/src/test.ts",
            "tsConfig": "projects/polaris-common/tsconfig.spec.json",
            "karmaConfig": "projects/polaris-common/karma.conf.js"
          }
        }
      }
    }
  },
  "defaultProject": "vega-libraries"
}

【问题讨论】：

你的 angular.json 中代码的 sn-p 对 lib 来说是什么样的？
感谢您的回答，我已经使用 angulr.json 的 sn-p 编辑了我的帖子

标签： angular sass shared-libraries

【解决方案1】：

这适用于 Angular 12。在以前的版本中可能会有所不同。要将scss设置为ng create component时的默认样式格式，在你的项目下的angular.json中，添加schematics：

"projectType": "library",
"schematics": {
    "@schematics/angular:component": {
        "style": "scss"
    },

在现有组件中，更改styleUrls 以反映重命名的scss 文件的路径，而不是css

// toto.component.ts

@Component({
  styleUrls: ['./toto.component.scss']
})

【讨论】：

有效！！非常感谢，你帮了我很多