如何在 Vue 3 项目中自定义 Buefy 颜色？

Question

我正在尝试自定义 Vue 3 项目中的样式，因此我遵循文档：https://buefy.org/documentation/customization/，这给我带来了错误：

Error: Can't find stylesheet to import.
    ╷
  1 │ @import "~bulma/sass/utilities/_all";
    │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵

我的依赖项是：

{
  "name": "frontend",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@mdi/font": "^7.4.47",
    "axios": "^1.7.7",
    "buefy": "npm:@ntohq/buefy-next@^0.1.4",
    "bulma": "^1.0.2",
    "sass": "^1.79.5",
    "sass-loader": "^16.0.2",
    "vue": "^3.5.11",
    "vue-axios": "^3.5.2",
    "vue-cookies": "^1.8.4",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.4",
    "vite": "^5.4.8"
  }
}

我尝试将导入更改为

../node_modules/bulma/sass/utilities

（因为可以识别此导入），但我收到了不同的错误：

Error: Undefined variable.
     ╷
  31 │             $light-invert,
     │             ^^^^^^^^^^^^^
     ╵

在我的项目中自定义样式（颜色）的正确方法是什么？

Answer 1

几分钟前遇到了同样的问题并解决了。如果您运行的是 @ntohq/buefy-next v.0.1.4，它对我来说不适用于最新的 Bulma 版本。 将 bulma 降级为 [电子邮件受保护] 解决了问题。 Vue 3 的 Buefy 版本中的“最后发布时间是 5 个月前”是一个提示。 祝你好运！