步骤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

最好是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。

我注意到在移动到scss文件时一个非常烦人的陷阱!!在app.component.ts中，必须从简单的:styleUrls: [' app.ponent .scss']转移到styleUrls: ['./ app.ponent .scss'] (add ./)

ng在生成新项目时这样做，但在创建默认项目时似乎不这样做。如果在ng构建过程中看到resolve错误，请检查此问题。我只花了1个小时。

对于Angular 9.0及更新版本，更新Angular中的"schematics":{}对象。像这样的Json文件:

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

  // Angular 13 may contain this as well; NOT related
  "@schematics/angular:application": {
    ...
  }
},

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

博士TL; 注意:在Angular 9及以后的版本中，styleext被重命名为style Angular 9 & 9+在创建一个新项目时 对于现有的: ng图表.@schematics /角:组件。scss风格 对于Angular 2 - Angular 8: 对于一个现有的项目:ng config schematics.@schematics/angular:component。styleext scss

详细的回答

Angular 9 & 9+:

通过Angular CLI

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

直接在angular.json中:

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

对于旧版本

通过Angular CLI:

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

直接在angular.json中:

注意:查找angular-cli。Json版本大于6。对于版本6和6+，该文件已被重命名为angular.json

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

注:原来的SO答案可以在这里找到