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

设置为全局默认值

Ng设置默认值。styleExt = scss——全球

步骤1。使用npm安装bulma包

npm install --save bulma

步骤2。开放的角。Json和更新以下代码

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

就是这样。

为了方便地公开Bulma的工具，将stylePreprocessorOptions添加到angular.json中。

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

查找 + 角度 6

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

最好是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默认总是使用scss

为了避免每次生成项目时都传递——style scss，你可能想要全局调整angular-cli的默认配置，使用以下命令:

ng set --global defaults.styleExt scss

请注意，某些版本的angular-cli包含读取上述全局标志的错误(见链接)。如果你的版本包含这个错误，生成你的项目:

ng new some_project_name --style=scss