Angular CLI SASS选项
本文翻译自：Angular CLI SASS options
I'm new to Angular and I'm coming from the Ember community. 我是Angular的新手，我来自Ember社区。 Trying to use the new Angular-CLI based off of Ember-CLI. 尝试使用基于Ember-CLI的新Angular-CLI。
I need to know the best way to handle SASS in a new Angular project. 我需要知道在新的Angular项目中处理SASS的最佳方法。 I tried using the ember-cli-sass repo to see if it would play along since a number of core components of the Angular-CLI are run off of Ember-CLI modules. 我尝试使用ember-cli-sass回购协议来查看它是否可以正常运行，因为Angular-CLI的许多核心组件都使用了Ember-CLI模块。
It didnt work but than again not sure if I just misconfigured something. 它没有用，但是再不确定我是否配置错误。
Also, what is the best way to organize styles in a new Angular project? 另外，在新的Angular项目中组织样式的最佳方法是什么？ It would be nice to have the sass file in the same folder as the component. 最好将sass文件与组件放在同一文件夹中。
#1楼
参考：https://stackoom.com/question/2RyXg/Angular-CLI-SASS选项
#2楼
Quoted from Officials github repo here - 从官方github回购中引用这里-
To use one just install for example 例如，要使用一个，只需安装
npm install node-sassand rename .css files in your project to .scss or .sass. 并将项目中的.css文件重命名为.scss或.sass。 They will be compiled automatically. 它们将自动编译。 The Angular2App's options argument has sassCompiler, lessCompiler, stylusCompiler and compassCompiler options that are passed directly to their respective CSS preprocessors. Angular2App的options参数具有sassCompiler，lessCompiler，stylusCompiler和CompassCompiler选项，这些选项直接传递给各自的CSS预处理器。
See here 看这里
- https://github.com/angular/angular-cli/wiki/stories-css-preprocessors https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
#3楼
When you are creating your project with angular cli try this: 当您使用angular cli创建项目时，请尝试以下操作：
ng new My_New_Project --style=sass
This generating all your components with predifined sass files. 这将生成带有预定义sass文件的所有组件。
If you want scss syntax create your project with : 如果要使用scss语法，请使用以下命令创建项目：
ng new My_New_Project --style=scss
If you are changing your existing style in your project 如果要更改项目中的现有样式
ng set defaults.styleExt scss
Cli handles the rest of it. Cli处理其余的工作。
For Latest Versions 对于最新版本
For Angular 6 to set new style on existing project with CLI: 为了使Angular 6使用CLI在现有项目上设置新样式：
ng config schematics.@schematics/angular:component.styleext scss
Or Directly into angular.json: 或直接进入angular.json：
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
#4楼
Like Mertcan said, the best way to use scss is to create the project with that option: 就像Mertcan所说的那样，使用scss的最佳方法是使用该选项创建项目：
ng new My_New_Project --style=scss
Angular-cli also adds an option to change the default css preprocessor after the project has been created by using the command: 在使用以下命令创建项目后，Angular-cli还添加了一个选项来更改默认的css预处理器：
ng set defaults.styleExt scss
For more info you can look here for their documentation: 有关更多信息，您可以在这里查看其文档：
https://github.com/angular/angular-cli https://github.com/angular/angular-cli
#5楼
I noticed a very anoying gotcha in moving to scss files!!! 我注意到在移至scss文件时非常烦恼！！！ One MUST move from a simple: styleUrls: ['app.component.scss'] to styleUrls: ['./app.component.scss'] (add ./ ) in app.component.ts 必须从一个简单的移动： styleUrls: ['app.component.scss']到styleUrls: ['./app.component.scss']添加./中） app.component.ts
Which ng does when you generate a new project, but seemingly not when the default project is created. 生成新项目时执行哪个ng，但创建默认项目时似乎不执行。 If you see resolve errors during ng build, check for this issue. 如果在ng生成期间看到解决错误，请检查此问题。 It only took me ~ 1 hour. 只花了我大约1个小时。
#6楼
Update for Angular 6+ 更新Angular 6+
New Projects 新项目
When generating a new project with Angular CLI, specify the css pre-processor as 使用Angular CLI 生成新项目时，将css预处理器指定为
Use SCSS syntax 使用SCSS语法
ng new sassy-project --style=scssUse SASS syntax 使用SASS语法
ng new sassy-project --style=sass
Updating existing project 更新现有项目
Set default style on an existing project by running 通过运行在现有项目上设置默认样式
Use SCSS syntax 使用SCSS语法
ng config schematics.@schematics/angular:component.styleext scssUse SASS syntax 使用SASS语法
ng config schematics.@schematics/angular:component.styleext sass
The above command will update your workspace file (angular.json) with 上面的命令将使用以下命令更新您的工作区文件（angular.json）
"schematics": { "@schematics/angular:component": { "styleext": "scss" } }where
styleextcan be eitherscssorsassas per the choice. 根据选择，styleext可以是scss或sass。
Original Answer (for Angular < 6) 原始答案（针对Angular <6）
New projects 新项目
For new projects we can set the options --style=sass or --style=scss according to the desired flavor SASS/SCSS 对于新项目，我们可以根据所需的风味SASS / SCSS设置选项--style=sass或--style=scss
Use SASS syntax 使用SASS语法
ng new project --style=sassUse SCSS syntax 使用SCSS语法
ng new project --style=scss
then install node-sass , 然后安装node-sass ，
npm install node-sass --save-dev
Updating existing projects 更新现有项目
To make angular-cli to compile sass files with node-sass , I had to run, 为了使angular-cli用node-sass编译sass文件，我必须运行，
npm install node-sass --save-dev
which installs node-sass . 这将安装node-sass 。 Then 然后
for SASS syntax 用于SASS语法
ng set defaults.styleExt sassfor SCSS syntax 用于SCSS语法
ng set defaults.styleExt scss
to set the default styleExt to sass 将默认的styleExt设置为sass
(or) （要么）
change styleExt to sass or scss for desired syntax in .angular-cli.json , 改变styleExt到sass或scss在期望的语法.angular-cli.json ，
for SASS syntax 用于SASS语法
"defaults": { "styleExt": "sass", }for SCSS syntax 用于SCSS语法
"defaults": { "styleExt": "scss", }
Although it generated compiler errors. 虽然它生成了编译器错误。
"styles": [
"styles.css"
],
which was fixed by changing the lines of .angular-cli.json , 通过更改.angular-cli.json的行来.angular-cli.json ，
"styles": [ "styles.css" ],to either, 要么
for SASS syntax 用于SASS语法
"styles": [ "styles.sass" ],for SCSS syntax 用于SCSS语法
"styles": [ "styles.scss" ],