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?
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!