Angular CLI：从现有项目生成 SASS 项目答案

【问题标题】：Angular CLI: generate SASS project from existing projectAngular CLI：从现有项目生成 SASS 项目
【发布时间】：2017-05-16 15:43:57
【问题描述】：

我开始处理一个 Angular CLI 生成的项目，并意识到我忘记了 --style=sassflag。有什么方法可以转换我的项目以使用 Angular CLI 启用 SASS？

【问题讨论】：

【解决方案1】：

在 Angular 6+ 中，如果您在执行 ng config defaults.styleExt = scss 后收到控制台警告比如下面是因为single dashes are not supported anymore

Schema validation failed with the following errors:
 Data path "" should NOT have additional properties(defaults).

你可以运行下面的命令来改变原理图

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

您需要进行两次手动更改

【讨论】：

架构验证失败，出现以下错误：数据路径“/schematics/@schematics~1angular:component”不能有其他属性（styleExt）。

【解决方案2】：

您可以在现有项目上设置默认样式

ng set defaults.styleExt scss

并在 angular-cli.json 文件中将 style.css 更改为 style.scss

"apps":[{
  "styles":[
     "styles.scss"
   ]
}]

【讨论】：

【解决方案3】：

在 Angular cli 6 中已弃用

ng set defaults.styleExt scss

你应该使用这个

ng config defaults.styleExt = scss

【讨论】：

【解决方案4】：

只需将现有的 css 文件（如果有）重命名为 sass 并将其添加到 angular-cli.json：

"defaults": {
    .....
    "styleExt": "sass"
}

还请查看此文件中的 app/styles 部分 - 您也应该在此处重命名文件名

【讨论】：