vuejs3bulmabuefy

How do I customize Buefy colors in a Vue 3 project?


I am trying to customize the styles in my Vue 3 project, so I am following the documentation: https://buefy.org/documentation/customization/ that brings me to the error:

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

My dependencies are:

{
  "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"
  }
}

I tryed to change the import to ../node_modules/bulma/sass/utilities (because this import can be recognized), but I get a different error:

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

What is the correct way to customize the styles (colors) in my project?


Solution

  • Got the same problem and solved it few minutes ago. If your are running @ntohq/buefy-next v.0.1.4, it didnt work for me with newest Bulma version. Downgrading the bulma to bulma@0.9.4 solved the problem. "Last publish 5 months ago" in Buefy version for Vue 3 was a tip. Good luck!