从CSS到CSS的Angular CLI

对于现有项目：

在angular.json文件中

1. 在build部分和test部分取代：

   "styles": ["src/styles.css"], 通过 "styles": ["src/styles.scss"],

2. 更换：

   "schematics": {}, 通过 "schematics": { "@schematics/angular:component": { "style": "scss" } },

使用ng config schematics.@schematics/angular:component.styleext scss命令有效，但是不能将配置放在同一位置。

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

对于新项目，此命令可以完成所有工作：

ng n project-name --style=scss

对于全局配置

新版本似乎没有全局命令

Angular CLI的CSS预处理器集成：6.0.3

生成新项目时，您还可以定义所需的样式文件扩展名：

ng new sassy-project --style=sass

或在现有项目上设置默认样式：

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

所有主要CSS预处理器的Angular CLI文档

使用命令：

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

对于遇到此线程的Nrwl扩展的用户：Nx会拦截所有命令（例如ng generate component myCompent），然后将其传递给AngularCLI。

使SCSS在Nx工作空间中工作的命令：

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

对于Angular 6，请查看官方文档

注：对于@angular/cli比旧版本6.0.0-beta.6使用ng set到位ng config。

对于现有项目

在现有的使用默认css样式设置的angular-cli项目中，您需要做一些事情：

1. 将默认样式扩展名更改为 scss

手动更改.angular-cli.json（Angular 5.x和更早版本）或angular.json（Angular 6+）或运行：

ng config defaults.styleExt=scss

如果出现错误：请Value cannot be found.使用以下命令：

ng配置示意图。@ schematics / angular：component.styleext scss

（*来源：Angular CLI SASS选项）

2. 将现有.css文件重命名为.scss（即styles.css和app / app.component.css）

3. 指向CLI来找到styles.scss

手动更改apps[0].stylesangular.json中的文件扩展名

4. 指向组件以查找新样式文件

更改styleUrls组件中的以匹配新文件名

对于未来的项目

如@Serginho所述，您可以在运行ng new命令时设置样式扩展名

ng new your-project-name --style=scss

如果要为以后创建的所有项目设置默认值，请运行以下命令：

ng config --global defaults.styleExt=scss

对于Angular 6，

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

注意：@ schematics / angular是Angular CLI的默认原理图

打开angular.json文件

1.改变

"schematics": {}

至

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

2. 从（在两个地方）更改

"src/styles.css"

至

"src/styles.scss"

然后检查并重命名所有.css文件并从以下位置更新component.ts文件的styleUrls.css to .scss

从ng6开始，这可以通过angular.json在根级别添加以下代码来完成：

手动更改.angular.json：

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