从CSS到CSS的Angular CLI

Question

我已经阅读了文档，其中说如果要使用scss，必须运行以下命令：ng set defaults.styleExt scss但是当我这样做并制作该文件时，我仍然在控制台中收到此错误：styles.bundle.js：33Uncaught错误：模块构建失败：错误：ENOENT：没有此类文件或目录，请打开'/Users/Egen/Code/angular/src/styles.css'(…）

Answer 1

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

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

对于现有项目

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

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

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

ng config defaults.styleExt=scss

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

ng config diagrams。@ schematics / angular：component.styleext scss

（*来源：Angular CLI SASS选项）

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

指向CLI来找到styles.scss

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

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

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

对于未来的项目

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

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

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

ng config --global defaults.styleExt=scss

Answer 2

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

手动更改.angular.json：

"schematics": {

  "@schematics/angular:component": {

    "styleext": "scss"

  }

}

Answer 3

打开angular.json文件

1.从

"schematics": {}

至

"schematics": {

           "@schematics/angular:component": {

                   "styleext": "scss"       

             }  

  }

从（在两个地方）更改

"src/styles.css"

至

"src/styles.scss"

然后检查并重命名所有.css文件，并从中更新component.ts文件的styleUrls.css to .scss