根本原因是Bulma变量覆盖顺序错误：$primary等自定义变量必须在@use "sass/utilities"之前声明，且需通过with参数严格匹配原始变量名传入，否则utilities已用默认值初始化，后续赋值无效。
自定义 Sass 变量不生效，大概率是覆盖顺序错了——Bulma 的变量必须在 @use "sass/utilities" 之前声明，且不能被后续 import 冲掉。
为什么 $primary 改了但按钮还是蓝色？
根本原因不是变量写错，而是 Bulma 的 Sass 加载机制：它把 initial-variables.scss 里定义的默认值（如 $primary: #00d1b2）当作“只读基准”，后续所有 @use 或 @import 都不会重新赋值已声明的变量，除非你提前注入。
常见错误写法：
@use "sass/utilities"; $primary: #ff6b6b; // ← 这行完全无效！utilities 已经用默认值初始化过所有变量 @use "sass/components/button";
正确顺序必须是：
- 先声明所有自定义变量（
$primary、$family-primary等） - 再用
@use ".../utilities" with (...)一次性传入 - 最后才
@use具体组件（button、navbar等）
@use ... with 的参数必须严格匹配变量路径
Bulma v1+ 强制使用 @use + with 模式，变量名必须和 sass/utilities/initial-variables.scss 中的原始声明名完全一致，大小写、连字符都不能错。
例如这些写法会失败：
-
$primary-color: #ff6b6b→ 错，正确变量名是$primary -
"primary": #ff6b6b→ 错，with里必须用未加引号的变量标识符 -
@use "sass/utilities" with ($primary: #ff6b6b, $link: #ff6b6b)→ 对，但注意：如果$link依赖$primary，Bulma 内部会按顺序计算，所以$primary必须出现在$link前面
推荐最小可行配置：
$primary: #8a4d76; $link: #fa7c91; $family-primary: "Inter", sans-serif; @use "sass/utilities" with ( $primary: $primary, $link: $link, $family-primary: $family-primary ); @use "sass/base"; @use "sass/components/button"; @use "sass/components/navbar";
检查编译输出是否真用了你的变量
光看 CSS 文件没用，得确认 Sass 编译器确实读到了你的值。在自定义文件末尾加一行调试：
@debug "primary is: #{$primary}";
运行编译时，终端会输出实际值。如果输出还是 #00d1b2，说明你的变量文件根本没被加载，或被其他 @use 覆盖了。
容易被忽略的点：
- 确保你
@use的是sass/utilities，不是sass/utilities/derived-variables（后者是计算结果，不能覆盖） - 如果你用的是
bulma.scss入口文件，它内部已经@use "utilities"了一次，默认值已固化——必须绕过它，直接@use组件子模块 - Vite / Webpack 的 Sass 加载器可能缓存了旧变量，改完后清一下 node_modules/.vite 或 .cache
最硬的验证方式：打开编译后的 CSS，搜索 .button.is-primary，看它的 background-color 是否等于你设的 $primary 值——不是靠浏览器开发者工具看最终渲染色，因为可能被其他 CSS 覆盖。
