CSS预处理器集成 Angular CLI支持所有主要的CSS预处理程序:

要使用这些预处理器，只需将文件添加到组件的styleUrls中:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

当生成一个新项目时，你也可以定义样式文件的扩展名:

ng new sassy-project --style=sass

或者在现有项目上设置默认样式:

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

注意:@schematics/angular是angular CLI的默认原理图

样式字符串添加到@Component。styles数组必须用CSS编写，因为CLI不能对内联样式应用预处理程序。

基于angular文档 https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

最好是ng新的myApp——style=scss

然后Angular CLI会用scss为你创建任何新组件……

注意，使用scss在浏览器中不起作用，你可能知道。所以我们需要一些东西来编译它到css，因此我们可以使用node-sass，像下面这样安装它:

npm install node-sass --save-dev

你应该可以出发了!

如果你使用webpack，请在这里阅读:

命令行内的项目文件夹，其中您现有的package.json 是:NPM install node-sass sass-loader raw-loader——save-dev 在webpack.common.js中，搜索“rules:”并将该对象添加到 规则数组的结尾(不要忘记在数组的末尾添加逗号 以前的对象):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

然后在你的组件中:

@Component({
  styleUrls: ['./filename.scss'],
})

如果你想要全局CSS支持，那么在顶级组件(可能 去掉封装并包含SCSS:

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

这里是Angular starter。

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”:“萨斯” ｝

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

ng new My_New_Project --style=scss 

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

ng set defaults.styleExt scss

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

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

针对Angular 6+的更新

新项目

当用Angular CLI生成一个新项目时，将css预处理器指定为

使用SCSS语法 Ng新的ssy-project——style=scss 使用SASS语法 Ng新的时髦项目——style=sass

更新现有项目

通过运行在现有项目上设置默认样式

使用SCSS语法 Ng config schematics.@schematics/angular:组件。styleext scss 使用SASS语法 Ng config schematics.@schematics/angular:组件。styleext sass 上面的命令将更新你的工作空间文件(angular.json) “图表”:{ “@schematics /角:组件":{ :“styleext scss” ｝ ｝

其中styleext可以是SCSS或sass根据选择。

对于Angular 12，更新Angular。json:

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

and:

"build": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

"test": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}