不要使用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的大型网站可以非常简单地管理。

引用自官方github回购这里-

以安装为例 NPM安装node-sass 将项目中的.css文件重命名为.scss或.sass。它们将被自动编译。 Angular2App的options参数有sassCompiler、lessCompiler、stylusCompiler和compassCompiler选项，它们直接传递给各自的CSS预处理器。

在这里看到的

https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

不要使用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的大型网站可以非常简单地管理。

就像Mertcan说的，使用scss的最好方法是创建带有该选项的项目:

ng new My_New_Project --style=scss 

Angular-cli还添加了一个选项，可以在项目创建后使用以下命令更改默认的css预处理器:

ng set defaults.styleExt scss

要了解更多信息，你可以在这里查看他们的文档:

https://github.com/angular/angular-cli

Angular- cli是推荐的方法，也是Angular 2+社区的标准。

克里特岛与SCSS的新项目

ng new My-New-Project——style=sass

转换现有项目(CLI小于v6)

Ng设置默认值。styleExt scss

(必须手动重命名所有的。css文件，不要忘记重命名你的组件文件)

转换现有项目(CLI大于v6)

将所有CSS文件重命名为SCSS，并更新引用它们的组件。 将以下内容添加到angular的“schematics”键中。Json(通常是第11行):

“@schematics /角:组件":{ “styleext”:“萨斯” ｝

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"
    }
}