步骤1。使用npm安装bulma软件包

npm install --save bulma

第2步。打开angular.json并更新以下代码

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

而已。

To easily expose Bulma’s tools, add stylePreprocessorOptions to angular.json.

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

BULMA + ANGULAR 6

我尝试使用此命令更新项目以使用sass

ng set defaults.styleExt scss

但是得到这个

不建议使用get / set，而推荐使用config命令。

• 角CLI：6.0.7
• 节点：8.9.0
• 操作系统：Linux x64
• 角度：6.0.3

所以我删除了我的项目（因为我才刚刚开始并且在我的项目中没有代码），并使用最初设置的sass创建了一个新项目。

ng new my-sassy-app --style = scss

但是，如果有人可以共享更新现有项目的方式，我将不胜感激，因为那样很好。

截至2019年3月10日，安瓜尔放弃了对sass的支持。无论您--style在运行时使用什么选项ng new，总会.scss生成文件。可耻的是，没有任何解释就放弃了无礼的支持。

Angular-CLI是推荐的方法，并且是Angular 2+社区中的标准方法。

使用SCSS创建一个新项目

ng new My-New-Project --style=sass

转换现有项目（CLI低于v6）

ng set defaults.styleExt scss

（必须使用这种方法手动重命名所有.css文件，不要忘记在组件文件中重命名）

转换现有项目（CLI大于v6）

1. 将所有CSS文件重命名为SCSS并更新引用它们的组件。
2. 将以下内容添加到angular.json的“示意图”键（通常是第11行）：

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

将其设置为全局默认值

ng set defaults.styleExt=scss --global

以下内容应在有角度的CLI 6项目中起作用。即，如果您得到：

不建议使用get / set，而推荐使用config命令。

npm install node-sass --save-dev

然后（确保您更改了项目名称）

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

要获取默认项目名称，请使用：

ng config defaultProject

但是： 如果您已将项目从<6迁移到角度6，则很有可能不会出现配置。在这种情况下，您可能会得到：

无效的JSON字符：0时为“ s”

因此，angular.json将需要手动编辑。

您将希望它看起来像这样（注意styleex属性）：

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

在我看来，似乎是一个过于复杂的架构。¯_（ツ）_ /¯

现在，您必须将所有的CSS / less文件更改为scss，并更新组件等中的任何引用，但是您应该一切顺利。

当您使用angular cli创建项目时，请尝试以下操作：

ng new My_New_Project --style=sass 

This generating all your components with predifined sass files.

If you want scss syntax create your project with :

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.

For Latest Versions

For Angular 6 to set new style on existing project with CLI:

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

Or Directly into angular.json:

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

从官方github回购这里引用-

例如，要使用一个只需安装

npm install node-sass

并将项目中的.css文件重命名为.scss或.sass。它们将自动编译。Angular2App的options参数具有sassCompiler，lessCompiler，stylusCompiler和CompassCompiler选项，这些选项直接传递给各自的CSS预处理器。

看这里

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

告诉angular-cli默认始终使用scss

为了避免--style scss每次生成项目都通过，最好使用以下命令全局调整angular-cli的默认配置：

ng set --global defaults.styleExt scss

请注意，某些版本的angular-cli包含一个读取上述全局标志的错误（请参阅链接）。如果您的版本包含此错误，请使用以下命令生成项目：

ng new some_project_name --style=scss

就像Mertcan所说的那样，使用scss的最佳方法是使用该选项创建项目：

ng new My_New_Project --style=scss 

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

ng set defaults.styleExt scss

有关更多信息，您可以在这里查看其文档：

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