Issues Installing Buefy with Vue2

[torresmald]

Buefy version: 0.9.23 Vuejs version: [2.6.11]

Hi,

Im having some issues installing Buefy, if I comment the @import "~buefy/src/scss/buefy" in my main.scss all are installing fine;

This is the error code:

ERROR in ./src/styles/main.scss (./node_modules/css-loader!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. ╷ 3 │ $carousel-arrow-background: $scheme-main !default; │ ^^^^^^^^^^^^ ╵ node_modules/buefy/src/scss/components/_carousel.scss 3:29 @import node_modules/buefy/src/scss/buefy.scss 4:9 @import src/styles/main.scss 45:9 root stylesheet @ ./src/styles/main.scss 2:26-132 @ ./src/plugins/buefy.client.js @ ./src/entry-client.js

This is my main.scss file:

$primary: #1fb9b1; $radius: 0px; $dark: #181818; $white: #fff;

$shadow: initial;

@import "~bulma/sass/utilities/_all";

$input-focus-border-color: $primary; $input-focus-box-shadow-size: 0px; $input-hover-border-color: $primary;

$rate-color-active: $primary;

$snackbar-background-color: $white; $snackbar-color: $dark;

$button-focus-box-shadow-size: 0em;

$pagination-current-background-color: $primary; $pagination-current-border-color: $primary; $pagination-focus-border-color: $primary;

// Custom colors $primary-0: #DAF3F2; $primary-40: #6AD0CB; $primary-60:#1FB9B1; $primary-90: #19948E; $primary-100: #136F6A;

$neutral-10: #FBFBFB; $neutral-20: #F3F3F3; $neutral-30: #DBDBDB; $neutral-40: #C2C2C2; $neutral-70: #7A7A7A; $neutral-80: #494949; $neutral-100: #181818;

$warning-10: #FFDBC7; $warning-80: #B43132; $warning-90: #DD4C4D;

@import "~bulma"; @import "~buefy/src/scss/buefy"; @import "./medias"; ....

I read the Documentation and all seems ok...

Thanks for the support

[torresmald]

[chlumpchatkupt]

I got a similar error after upgrading to Bulma v1.0.0, and adding the variable to my own override file does not fix it.

13.96 vite v5.2.3 building for production...
14.00 transforming...
18.52 ✓ 328 modules transformed.
18.52 x Build failed in 4.55s
18.52 error during build:
18.52 Error: Undefined variable.
18.52    ╷
18.52 13 │ $link-visited: $grey !default;
18.52    │                ^^^^^
18.52    ╵
18.52   node_modules/.pnpm/buefy@0.9.28_vue@2.7.14/node_modules/buefy/src/scss/utils/_variables.scss 13:16  @import
18.52   node_modules/.pnpm/buefy@0.9.28_vue@2.7.14/node_modules/buefy/src/scss/utils/_all.scss 2:9          @import
18.52   node_modules/.pnpm/buefy@0.9.28_vue@2.7.14/node_modules/buefy/src/scss/buefy.scss 1:9               @use
18.52   src/assets/scss/main.scss 58:1                                                                      root stylesheet
18.52     at Object.wrapException (/app/node_modules/.pnpm/sass@1.72.0/node_modules/sass/sass.dart.js:2166:43)
18.52     at /app/node_modules/.pnpm/sass@1.72.0/node_modules/sass/sass.dart.js:83440:23
18.52     at _wrapJsFunctionForAsync_closure.$protected (/app/node_modules/.pnpm/sass@1.72.0/node_modules/sass/sass.dart.js:4921:15)
18.52     at _wrapJsFunctionForAsync_closure.call$2 (/app/node_modules/.pnpm/sass@1.72.0/node_modules/sass/sass.dart.js:35779:12)
18.52     at Object._asyncStartSync (/app/node_modules/.pnpm/sass@1.72.0/node_modules/sass/sass.dart.js:4885:20)
18.52     at _EvaluateVisitor2.visitVariableExpression$body$_EvaluateVisitor0 (/app/node_modules/.pnpm/sass@1.72.0/node_modules/sass/sass.dart.js:83446:16)
18.52     at _EvaluateVisitor2.visitVariableExpression$1 (/app/node_modules/.pnpm/sass@1.72.0/node_modules/sass/sass.dart.js:83420:19)
18.52     at VariableExpression0.accept$1$1 (/app/node_modules/.pnpm/sass@1.72.0/node_modules/sass/sass.dart.js:114885:22)
18.52     at VariableExpression0.accept$1 (/app/node_modules/.pnpm/sass@1.72.0/node_modules/sass/sass.dart.js:114888:19)
18.52     at /app/node_modules/.pnpm/sass@1.72.0/node_modules/sass/sass.dart.js:83193:23
18.53  ELIFECYCLE  Command failed with exit code 1.

[wesdevpro]

Hey guys please see this issue https://github.com/ntohq/buefy-next/issues/208#issuecomment-2014242574 The issue is with how Bulma V1 has changed its structure when it comes to SASS variables. That's why you are getting this error from Vite. You will have to downgrade to the latest 0.9.x versions of Bulma for now until we get it implemented properly in Buefy-next.

[jaybeecave]

use bulma 0.9.4