在 Angular 6+ (styleExt) 中使用 scss 作为默认样式 sheet

Question

显然声明默认样式表扩展的方式从 Angular 6 开始发生了变化。 angular.json 中的 styleExt 属性不再被识别。

对于新项目，可以使用 new 命令中的 CLI --style=scss 选项进行设置。

但是，对于我从 Angular <5 迁移的现有项目，或者如果您在项目创建期间忘记这样做，您如何更改此设置？

此问题与 Angular 的第 5 至 6 版的重大更改严格相关。

Answer 1

设置的位置在 angular.json 中发生了变化。现在有两种方法可以设置这个选项。

通过 Angular CLI：

ng config schematics.@schematics/angular:component.styleext scss

直接在angular.json:

"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
}

请注意，从 Angular 9 开始，styleext 已重命名为 style。所以我们最终得到：

ng config schematics.@schematics/angular:component.style scss

和

"schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
}

Answer 2

要将现有项目从 css 提高到 scss，请执行以下步骤：

在angular.json文件中

在build部分和test部分，替换：

"styles": ["src/styles.css"], 来自 "styles": ["src/styles.scss"],
替换：

"schematics": {}, 来自 "schematics": { "@schematics/angular:component": { "style": "scss" } },

Using ng config schematics.@schematics/angular:component.styleext scss command works but it does not place the configuration in the same place.

在您的项目中 将您的 .css 文件重命名为 .scss

Using scss as default style sheet in Angular 6+ (styleExt)