从css到scss的Angular cli

Question

我已经阅读了文档，文档上说如果我想使用< code>scss,我必须运行以下命令:

ng set defaults.styleExt scss

但是，当我这样做并创建该文件时，我仍然会在控制台中收到以下错误:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

Answer 1

打开angular.json文件

1.从

"原理图": {}

自

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

“.css””

自

< code>"src/styles.scss"

然后检查并重命名所有.css文件，并将 component.ts 文件样式从.css更新为 .scss

Answer 2

从ng6开始，这可以通过在根级别将以下代码添加到< code>angular.json来实现:

在< code>.angular.json中手动更改:

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

Answer 3

对于Angular 6，请检查官方留档

注意：对于早于 6.0.0-beta.6 的 @angular/cli 版本，请使用 ng 集代替 ng 配置。

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

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

在<代码>中手动更改。Angular-CLI . JSON (Angular 5 . x及更早版本)或< code > Angular . JSON (Angular 6)或运行:

ng config defaults.styleExt=scss

如果出现错误:找不到< code >值。使用命令:

ng配置schematics.@schematics /angularcomponent.styleext

（*来源：角度 CLI SASS 选项）

重命名现有的＜code＞。css文件到。scss（即styles.css和app/app.component.css）

指向CLI找到styles.scss

手动更改应用程序中的文件扩展名[0].样式在角度.json

更改组件中的样式URL以匹配新文件名

正如@Serginho所提到的，您可以在运行＜code＞ng new

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

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

ng config --global defaults.styleExt=scss