在Angular中使用Bulma SCSS变量时自定义变量未生效问题

问题根源 #

你当前的SCSS导入和变量定义顺序完全错误，SCSS为从上到下顺序预编译，你先引入了完整的bulma.scss文件时，Bulma的所有样式已经完成编译生成，后续修改$primary变量、引入变量/函数文件都不会对已生成的样式产生影响。

正确配置方案 #

按如下顺序调整styles.scss的代码：

• 先引入Bulma的变量、函数依赖文件
• 自定义覆盖$primary变量，不要加!default标记（!default表示变量已有值时不做覆盖，反而会导致你的自定义值失效）
• 最后引入Bulma主样式文件

正确代码示例：

@import "./assets/bulma-scss/utilities/initial-variables.scss";
@import "./assets/bulma-scss/utilities/functions.scss";

$primary: red;

@import "./assets/bulma-scss/bulma.scss";

body {
  padding: 50px;
}

可选校验项 #

如果调整后仍不生效，检查angular.json中的全局样式配置，确认对应项目的architect.build.options.styles数组中包含了你的styles.scss文件：

{
  "projects": {
    "<你的项目名称>": {
      "architect": {
        "build": {
          "options": {
            "styles": ["src/styles.scss"]
          }
        }
      }
    }
  }
}

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