唯一生效方式是修改 _variables.sass 中 $primary 等变量并重新编译；需同步调整 $link、$info 等关联色，且编译时须正确配置 --load-path 或构建工具的 additionalData 与 implementation。
直接改 $primary 变量就能换主题色，但必须从 Sass 源码编译，用 CDN 引入的 CSS 文件改不了
很多人试过在页面里加 :root { --primary: #ff6b6b; } 或覆盖 .is-primary 类，发现按钮、标题等样式没变——因为 Bulma 的颜色类（如 .button.is-primary）是编译时根据 Sass 变量生成的静态 CSS，运行时无法动态响应 CSS 自定义属性。真正生效的唯一方式：修改 _variables.sass 里的基础色变量，再走一遍 Sass 编译流程。
修改哪些变量？优先改 $primary，顺带检查 $link、$info 等语义色是否需同步调整
Bulma 默认用 $primary 驱动大部分主题组件（按钮、标签、进度条等），但它不单独决定所有颜色。实际使用中容易漏掉这些关联变量：
-
$link控制超链接、.navbar-item悬停色，和$primary不自动同步 -
$info、$success、$warning、$danger是独立变量，若想保持语义一致性（比如把$info也设成同色系浅蓝），得手动设 -
$text-strong和$text-light影响文字对比度，换深色主题时若忽略，可能导致文字不可读 - 部分组件（如
.card边框）依赖$border，不是$primary的衍生值
编译命令别用 sass CLI 直接输 .sass 文件，要确保加载了 Bulma 的完整模块路径
常见错误是执行 sass src/main.sass dist/main.css 却报 File to import not found——因为 Bulma 的 @import 依赖 node_modules 路径。正确做法是显式指定 --load-path：
sass --load-path=node_modules/bulma src/main.sass dist/main.css
你的 src/main.sass 应该长这样（顺序不能错）：
@import "./custom-variables" @import "bulma" @import "./custom-overrides"
其中 custom-variables.sass 必须在 @import "bulma" 前，否则变量不会被覆盖；custom-overrides.sass 放最后，用于补丁级样式微调（比如改某个组件内边距）。
用 Webpack/Vite 时，Sass loader 默认不读 node_modules，得手动配 additionalData 或 implementation
Webpack 用户常卡在 Cannot resolve 'bulma'，本质是 Sass loader 没把 node_modules 加进 includePaths。Vite 则默认更严格，需在 vite.config.ts 显式注入：
css: {
preprocessorOptions: {
sass: {
additionalData: '@import "@/styles/custom-variables.sass";',
// 注意：Vite 3+ 要求传入 Dart Sass 实例，否则 <code>@use</code> 报错
implementation: require('sass')
}
}
}
关键点：additionalData 会全局注入，省去每个文件写 @import；但如果你用了 @use（Bulma 0.9+ 推荐），就必须配 implementation 指向 Dart Sass，否则 Node Sass 兼容不了。
最易被忽略的是变量作用域——Bulma 内部用 @use "sass:map" 等，一旦 loader 用错 Sass 引擎，连变量覆盖都会静默失败，编译出来的 CSS 还是默认色。
