截至2019年3月10日，安圭尔放弃了对萨斯的支持。不管你在运行ng new时传递给——style什么选项，你总是会生成.scss文件。很遗憾，没有任何解释就取消了粗鲁的支持。

Angular CLI版本9(用于创建Angular 9项目)现在从schematics中获取style，而不是styleext。使用如下命令: Ng config schematics.@schematics/angular:组件。样式scsand和生成的角。Json应该是这样的 “图表”:{ “@schematics /角:组件":{ “风格”:“scss” ｝ ｝

其他可能的解决方案和解释: 用angular CLI创建一个支持sass的新项目，试试这个:

ng new My_New_Project --style=scss 

你也可以使用——style=sass &如果你不知道区别，阅读这篇简短的文章，如果你仍然不知道，就使用scss并继续学习。

如果你有一个angular 5的项目，使用这个命令来更新项目的配置。

ng set defaults.styleExt scss

最新版本

Angular 6使用CLI为现有项目设置新样式:

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

或者直接导入angular.json:

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

我注意到在移动到scss文件时一个非常烦人的陷阱!!在app.component.ts中，必须从简单的:styleUrls: [' app.ponent .scss']转移到styleUrls: ['./ app.ponent .scss'] (add ./)

ng在生成新项目时这样做，但在创建默认项目时似乎不这样做。如果在ng构建过程中看到resolve错误，请检查此问题。我只花了1个小时。

不要使用SASS或ANGULAR的嵌入式CSS系统!!

这一点我怎么强调都不为过。当你同时使用这两种技术时，Angular的人不理解基本的级联样式表系统——就像这个Angular。json设置-编译器将所有CSS放入Javascript模块，然后将它们作为嵌入式CSS输出到HTML页面的头部，破坏和混淆级联顺序，并禁用原生CSS导入级联。

出于这个原因，我建议你从“ANGULAR.”中删除所有的样式引用。，然后手动将它们添加回“index.html”中，就像这样:

<link href="styles/styles.css" rel="stylesheet" />

现在你有了一个功能齐全的级联CSS系统，它可以在多次刷新时完全缓存在你的浏览器中，无需ecmascript的杂技，节省大量带宽，增加静态文件中的CSS整体管理，并完全控制级联顺序，而不必像Angular尝试的那样将笨拙的嵌入CSS注入到所有web页面头部。

当您了解如何在基本CSS文件中管理级联时，甚至不需要使用SASS。对于那些使用少量链接的CSS文件学习级联顺序的人来说，具有复杂CSS的大型网站可以非常简单地管理。

截至2019年3月10日，安圭尔放弃了对萨斯的支持。不管你在运行ng new时传递给——style什么选项，你总是会生成.scss文件。很遗憾，没有任何解释就取消了粗鲁的支持。

对于Angular 9.0及更新版本，更新Angular中的"schematics":{}对象。像这样的Json文件:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  },

  // Angular 13 may contain this as well; NOT related
  "@schematics/angular:application": {
    ...
  }
},