从 css 到 scss 的 Angular-cli

Question

我已阅读 文档，其中说如果我想使用 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'(…)

原文由 Jamie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于 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 config schematics.@schematics/angular:component.styleext scss`

（\*来源： [Angular CLI SASS 选项](https://stackoverflow.com/questions/36220256/angular-cli-sass-options)）

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

2. 指向 CLI 以查找 styles.scss


> 在 `apps[0].styles` 中手动更改 `angular.json` 中的文件扩展名

1. 指向组件以找到您的新样式文件

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

## 对于未来的项目

正如@Serginho 提到的，您可以在运行 `ng new` 命令时设置样式扩展

ng new your-project-name –style=scss

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

ng config –global defaults.styleExt=scss

”`

原文由 Chic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

手动更改 .angular.json ：

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

原文由 Jose Orihuela 发布，翻译遵循 CC BY-SA 4.0 许可协议