Vue 3项目自定义Buefy颜色遇错误，求正确配置方法

问题根源 #

• Vite不支持~前缀的路径解析，原文档里的@import "~bulma/sass/utilities/_all";会触发路径找不到的错误
• Bulma 1.0.x 对变量结构和命名做了调整，旧变量如$light-invert已被移除或替换

正确自定义步骤 #

1. 修正Sass导入路径 #

在自定义Sass文件（比如src/styles/custom.scss）中，去掉~前缀，直接通过包名导入：

// 导入Bulma工具类与变量
@import "bulma/sass/utilities/_all";

如果仍存在路径识别问题，可在vite.config.js中配置Sass的解析路径，确保Vite能读取node_modules资源：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: ['./node_modules']
      }
    }
  }
})

2. 适配Bulma 1.0.x变量规则 #

Bulma 1.0.x 废弃了$light-invert这类旧变量，改用新的颜色系统。自定义主题色可参考以下写法：

// 自定义Bulma核心变量
$primary: #209cee;
$primary-invert: #ffffff;

// 按需导入Bulma模块
@import "bulma/sass/base/_all";
@import "bulma/sass/components/_all";
@import "bulma/sass/elements/_all";

若需使用颜色反转效果，可使用内置的$color-invert函数：

.button.is-primary {
  background-color: $primary;
  color: $color-invert($primary);
}

3. 正确导入Buefy样式 #

针对@ntohq/buefy-next（Vue3适配版），推荐两种自定义方式：

• 方式一：导入Buefy Sass源文件（深度自定义）
  在自定义变量后导入Buefy的Sass源码：

  // 先定义自定义变量
  @import "bulma/sass/utilities/_all";
  $primary: #your-custom-color;
  
  // 导入Buefy核心样式
  import "@ntohq/buefy-next/src/scss/buefy";
  

• 方式二：导入编译样式后覆盖
  在main.js中先导入Buefy编译后的样式：

  import '@ntohq/buefy-next/dist/buefy.css'
  

  再在自定义Sass文件中编写覆盖样式：

  .button.is-primary {
    background-color: #your-custom-color;
  }
  

4. 引入自定义样式到项目 #

在main.js中导入你的自定义Sass文件：

import './styles/custom.scss'

额外优化 #

你的项目使用Vite，无需单独安装sass-loader（Vite自带Sass解析能力），可以将sass-loader从依赖列表中移除。

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