使用node-sass自定义Bulma框架主题色不生效如何解决？

问题根源 #

Bulma的所有内置变量都使用Sass的!default标识定义，支持被提前声明的同名变量覆盖。你当前的写法是先导入了完整的Bulma样式，再定义自定义变量，自然无法覆盖已经编译完成的Bulma默认样式。

解决步骤 #

1. 调整Sass文件的代码顺序
   将自定义变量声明放在Bulma导入语句之前，修改后代码如下：

// 先定义自定义变量
$purple: #8A4D76;
$primary: $purple;

// 再导入Bulma
@import "node_modules/bulma/bulma";

body {
  background: aquamarine;
  margin: 0;
}

2. 重新执行编译命令
   运行以下命令触发Sass编译：
   npm run sass
   确认编译后的css文件输出路径、和HTML页面中引入的样式文件路径完全一致。

3. 排查缓存问题
   如果修改后样式仍未生效，先清除浏览器缓存，使用硬刷新操作（Windows/Linux按Ctrl+F5，Mac按Cmd+Shift+R），也可以直接打开dist/css目录下的输出文件，确认.is-primary对应的颜色值是否已经替换为你定义的紫色。

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