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

引用自官方github回购这里-

以安装为例 NPM安装node-sass 将项目中的.css文件重命名为.scss或.sass。它们将被自动编译。 Angular2App的options参数有sassCompiler、lessCompiler、stylusCompiler和compassCompiler选项，它们直接传递给各自的CSS预处理器。

在这里看到的

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

Angular CLI版本9(用于创建Angular 9项目)现在从schematics中获取style，而不是styleext。使用如下命令: Ng config schematics.@schematics/angular:组件。样式scsand和生成的角。Json应该是这样的 “图表”:{ “@schematics /角:组件":{ “风格”:“scss” ｝ ｝

其他可能的解决方案和解释: 用angular CLI创建一个支持sass的新项目，试试这个:

ng new My_New_Project --style=scss 

你也可以使用——style=sass &如果你不知道区别，阅读这篇简短的文章，如果你仍然不知道，就使用scss并继续学习。

如果你有一个angular 5的项目，使用这个命令来更新项目的配置。

ng set defaults.styleExt scss

最新版本

Angular 6使用CLI为现有项目设置新样式:

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

或者直接导入angular.json:

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

下面的代码应该在angular 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迁移到angular 6，很有可能配置不会在那里。在这种情况下，你可能会得到:

无效的JSON字符:“s”在0:0

因此需要手动编辑angular。Json是必需的。

你会希望它看起来像这样(注意styleex属性):

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

对我来说，这似乎是一个过于复杂的模式。¯_()_/¯

你现在必须去改变你所有的css/less文件为scss和更新组件等任何引用，但你应该很好去。

告诉angular-cli默认总是使用scss

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

ng set --global defaults.styleExt scss

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

ng new some_project_name --style=scss

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