Vue2项目中Buefy搭配Bulma自定义$primary主色不生效问题

核心原因是SASS变量覆盖时机错误+项目重复引入Buefy/Bulma预编译CSS，样式加载顺序越靠后优先级越高，所以默认生成的紫色样式覆盖了你的自定义粉色样式，按以下步骤操作即可解决：

1. 移除所有Buefy默认CSS引入 #

检查项目main.js/main.ts、vue.config.js等配置文件，删除所有直接引入Buefy/Bulma预编译CSS的代码，比如：

import 'buefy/dist/buefy.css'

这类预编译CSS是用默认变量生成的，会被独立打包成单独CSS文件排在加载队列末尾，必须全部移除，仅保留你自己写的SCSS引入路径即可。

2. 调整SCSS变量声明顺序 #

Bulma的变量都带!default标记，需要把所有自定义变量放在引入任何Bulma/Buefy的SCSS文件之前才能生效，调整后的SCSS代码如下：

// 先声明所有自定义变量
$primary: #e912ba;
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);

// Lists and maps
$custom-colors: $primary;
$custom-shades: null !default;

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
    (
        "primary": (
            $primary,
            $primary-invert,
            $primary-light,
            $primary-dark,
        ),
    ),
    $custom-colors
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

// 最后引入Bulma工具、核心样式、Buefy样式
@import '~bulma/sass/utilities/all';
@import '~bulma';
@import '~buefy/src/scss/buefy';

3. 调整全局样式引入位置 #

不要在App.vue的style块中引入全局SCSS，改成在main.js中直接引入：

import './css/style.scss'

如果有组件单独使用了Bulma/Buefy的样式变量，可以在vue.config.js中配置全局变量注入，确保所有SCSS编译前都能拿到自定义变量值：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // sass-loader@8.x版本对应参数为prependData
        prependData: `@import "@/css/style.scss";`
      }
    }
  }
}

4. 清理缓存重新构建 #

删除项目下的node_modules/.cache文件夹，重新执行构建/启动命令，打包后的CSS文件将仅保留你自定义的色值，不会再出现默认紫色样式被后加载覆盖的问题。

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