从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