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-sass

and 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+

1. 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=scss 

   • Use SASS syntax 使用SASS语法

      ng new sassy-project --style=sass 

2. Updating existing project 更新现有项目

   Set default style on an existing project by running 通过运行在现有项目上设置默认样式

   • Use SCSS syntax 使用SCSS语法

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

   • Use 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 styleext can be either scss or sass as 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=sass 

• Use 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 sass 

• for 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" ],