Angular 6+如何将SCSS设为默认样式表（styleExt配置变更）

刚从Angular 5升级到6？发现原来在angular.json里的styleExt属性突然不管用了？别慌，我来给你梳理清楚这个破坏性变更的应对方法，不管是新项目初始化还是老项目迁移的场景都覆盖到：

一、新项目快速设置默认样式 #

如果是从零创建新项目，直接在CLI初始化命令里指定样式格式就行，比如要把SCSS设为默认：

ng new my-demo-project --style=scss

这样创建出来的项目，后续用CLI生成组件时，会自动生成对应扩展名的样式文件，不用再手动调整。

二、现有项目（迁移/未初始化设置）的修改步骤 #

要是你是从Angular 5及以下版本迁移过来的项目，或者当初创建项目时没指定样式扩展名，需要手动修改angular.json的两处配置：

1. 配置全局组件生成规则
   找到angular.json中对应项目的schematics节点（如果没有就手动添加），给@schematics/angular:component设置默认样式扩展名：

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

这里的"scss"可以替换成你需要的格式，比如less、styl或者保留默认的css。

2. 统一现有组件的样式文件（可选）
   如果想把项目里已有的组件也统一成新的样式扩展名，需要做这几步：

• 手动将所有旧扩展名的样式文件（比如.css）重命名为目标扩展名（比如.scss）
• 逐个修改组件@Component装饰器里styleUrls的文件路径，确保引用正确
• 如果项目里有全局样式文件，也要同步更新angular.json中styles数组里的文件路径

完成这些操作后，再用CLI生成新组件时，就会自动使用你设置的默认样式扩展名了。

注意：这个配置变更仅针对Angular 5到6的版本升级，更高版本的Angular延续了这个配置逻辑，不会再有类似的破坏性调整。

内容的提问来源于stack exchange，提问作者Daniel Lerps