如何将已安装Bulma包中的SASS集成到Angular应用中？

嘿，完全同意你的看法——同时用CDN和本地NPM包确实是冗余操作，直接集成Bulma的Sass还能让你轻松自定义样式变量，灵活性拉满！下面是针对Angular项目的具体实现步骤：

1. 补全必要依赖 #

你已经通过yarn add bulma安装了Bulma，接下来需要安装Sass预处理器，Angular需要它来编译Bulma的Sass文件：

yarn add node-sass --dev
# 用npm的话可以写成：
# npm install node-sass --save-dev

2. 配置Angular加载Bulma Sass #

方式一：直接引入官方Bulma文件 #

打开项目根目录的angular.json（适用于Angular 6+版本），找到build -> options -> styles数组，添加Bulma的主Sass文件路径：

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

如果是Angular 5及更早版本，修改的是.angular-cli.json里的styles数组，路径写法一致。

方式二：自定义Bulma变量（推荐） #

要是你想修改Bulma的默认主题色、字体、间距等，更推荐这种灵活的方式：

• 在src/styles目录下新建bulma-custom.sass文件
• 先写入你要自定义的变量（变量必须写在导入Bulma之前才会生效），比如：

$primary: #209cee
$secondary: #ff4081
$family-sans-serif: 'Roboto', sans-serif

• 接着导入Bulma的主文件：

@import '../../node_modules/bulma/bulma.sass'

• 最后在angular.json的styles数组里替换成这个自定义文件：

"styles": [
  "src/styles.scss",
  "src/styles/bulma-custom.sass"
],

3. 替代Font Awesome CDN #

你之前用的Font Awesome CDN也可以换成本地包，避免依赖外部资源：

yarn add @fortawesome/fontawesome-free
# 用npm的话：
# npm install @fortawesome/fontawesome-free --save

然后在angular.json的styles数组里添加Font Awesome的样式文件：

"styles": [
  "src/styles.scss",
  "src/styles/bulma-custom.sass",
  "./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],

配置完成后重启Angular开发服务器，Bulma的样式就会通过本地Sass编译加载了，而且你还能随时通过修改自定义变量来调整主题~

内容的提问来源于stack exchange，提问作者DonkeyBanana