升级Bulma至1.0.1后颜色覆盖配置失效问题求助

核心问题定位 #

你的测试样式生效，说明自定义SCSS文件能被正确编译，但$primary覆盖不生效，大概率是重复导入了Bulma原生CSS/SCSS，或是@use with的使用逻辑不符合Bulma 1.0的规范，导致自定义变量被原生变量覆盖。

具体修复步骤 #

1. 清理重复的Bulma导入 #

在app.js中，你同时导入了自定义编译CSS、Bulma原生SCSS和CSS，这会让原生Bulma样式覆盖你的自定义配置。只需保留自定义编译后的CSS文件，删除对bulma/css/bulma.css或bulma/sass/bulma.sass的直接导入。

2. 修正自定义SCSS文件结构 #

确保你的自定义SCSS文件（比如custom-bulma.scss）严格遵循Bulma 1.0的语法规范，正确使用@use with：

// 定义自定义颜色
$muhcolor: #你的自定义十六进制颜色值;

// 必须在导入任何Bulma组件前执行变量覆盖
@use "bulma/sass" with (
  $primary: $muhcolor
);

// 可选：导入衍生变量（如需使用Bulma颜色衍生工具）
@use "bulma/sass/utilities/derived-variables";

// 你的测试样式
body {
  background-color: brown;
}

注意：@use "bulma/sass" with必须是文件中第一个引用Bulma的语句，不能在它之前导入任何Bulma组件或工具类。

3. 确认npm编译脚本正确性 #

确保你的npm脚本是编译自定义SCSS文件，而非原生Bulma文件。示例：

"scripts": {
  "build:css": "sass src/custom-bulma.scss src/custom-bulma.css"
}

执行编译后，检查custom-bulma.css是否包含Bulma完整样式及你的变量覆盖逻辑。

4. 改用CRA内置的Sass编译 #

Create React App支持直接导入.scss文件，无需手动提前编译，直接在app.js中导入自定义SCSS即可：

import './custom-bulma.scss';

这样CRA会自动处理Sass编译，规避手动编译可能出现的路径或作用域问题。

额外注意点 #

• Bulma 1.0彻底弃用旧版@import变量覆盖方式，必须使用@use with语法。
• 不要在多个文件中分别使用@use "bulma/sass"，会导致变量作用域隔离，覆盖仅在当前文件有效。

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