如何在Angular CLI 6的angular.json中添加Sass编译功能？

别担心，已经创建好的项目也能轻松切换到Sass编译，不用重新搭建项目。Angular CLI 6.x用的angular.json确实和旧版结构不同，我来一步步教你配置：

1. 修改angular.json核心配置 #

打开项目根目录的angular.json，找到projects下你的项目名称（一般和文件夹名一致），然后做以下两处修改：

1.1 设置新建组件默认使用Sass #

找到schematics节点（如果没有就手动添加），配置组件的默认样式扩展为Sass：

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

这样之后用ng generate component新建组件时，会自动生成.scss样式文件，不用每次手动修改。

1.2 调整构建与测试的样式配置 #

找到architect -> build -> options，修改styles数组里的主样式文件路径（把.css后缀改成.scss），还可以添加stylePreprocessorOptions配置全局Sass资源的导入路径（可选但能提升开发效率）：

"build": {
  "options": {
    "styles": [
      "src/styles.scss" // 替换原来的styles.css
    ],
    "stylePreprocessorOptions": {
      "includePaths": [
        "src/styles/globals" // 示例：全局变量/混合宏文件存放路径
      ]
    }
  }
}

别忘了同步修改architect -> test -> options里的styles配置，确保测试环境也能正确处理Sass：

"test": {
  "options": {
    "styles": [
      "src/styles.scss"
    ]
  }
}

2. 转换现有样式文件 #

把项目里已有的.css文件批量改成.scss：

• 主样式文件：src/styles.css → src/styles.scss
• 各组件文件夹内的xxx.component.css → xxx.component.scss
• 同时修改每个组件@Component元数据里的styleUrls路径，比如：

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'] // 这里同步改成scss后缀
})

3. 验证配置生效 #

重启ng serve，如果项目能正常编译运行，就说明配置没问题。也可以新建一个测试组件验证默认设置：

ng generate component test-sass

查看生成的组件文件夹，应该会自动创建test-sass.component.scss文件，这就说明默认样式扩展已经生效了。

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