Bulma V1 CSS Variables Issues #208

wesdevpro · 2024-03-21T22:42:57Z

Overview of the problem

Buefy-next version: 0.1.3-53f9b2554051b9007ba4ba5c24a9115cd571cd6e
Vuejs version: 3.3.7"
OS/Browser:

Description

Bulma v1 must have changed the structure to how css/sass variables are named as the following error message states that the $light-invert does not exist.

Steps to reproduce

Checkout MigrateToBulmaV1 branch for buefy-next
Run the following command from the root of the buefy-next folder npm -w docs run dev
Navigate in your browser to http://localhost:5173/
Navigate back to the terminal you started the development server and notice the following error:

5:36:42 PM [vite] Internal server error: [sass] Undefined variable.
   ╷
14 │     "light": ($light, $light-invert),
   │                       ^^^^^^^^^^^^^
   ╵
  src\assets\scss\_variables.scss 14:23  @import
  src\assets\scss\main.scss 8:9          @import
  src\App.vue 2:13                       root stylesheet
  Plugin: vite:css
  File: E:\GitHub\MyOrganizations\buefy-next\packages\docs\src\assets\scss\_variables.scss:14:23
  Error: Undefined variable.
     ╷
  14 │     "light": ($light, $light-invert),
     │                       ^^^^^^^^^^^^^
     ╵
    src\assets\scss\_variables.scss 14:23  @import
    src\assets\scss\main.scss 8:9          @import
    src\App.vue 2:13                       root stylesheet
      at Object.wrapException (E:\GitHub\MyOrganizations\buefy-next\node_modules\sass\sass.dart.js:2166:43)
      at E:\GitHub\MyOrganizations\buefy-next\node_modules\sass\sass.dart.js:83440:23
      at _wrapJsFunctionForAsync_closure.$protected (E:\GitHub\MyOrganizations\buefy-next\node_modules\sass\sass.dart.js:4921:15)
      at _wrapJsFunctionForAsync_closure.call$2 (E:\GitHub\MyOrganizations\buefy-next\node_modules\sass\sass.dart.js:35779:12)
      at Object._asyncStartSync (E:\GitHub\MyOrganizations\buefy-next\node_modules\sass\sass.dart.js:4885:20)
      at _EvaluateVisitor2.visitVariableExpression$body$_EvaluateVisitor0 (E:\GitHub\MyOrganizations\buefy-next\node_modules\sass\sass.dart.js:83446:16)
      at _EvaluateVisitor2.visitVariableExpression$1 (E:\GitHub\MyOrganizations\buefy-next\node_modules\sass\sass.dart.js:83420:19)
      at VariableExpression0.accept$1$1 (E:\GitHub\MyOrganizations\buefy-next\node_modules\sass\sass.dart.js:114885:22)
      at VariableExpression0.accept$1 (E:\GitHub\MyOrganizations\buefy-next\node_modules\sass\sass.dart.js:114888:19)
      at _EvaluateVisitor_visitListExpression_closure2.call$1 (E:\GitHub\MyOrganizations\buefy-next\node_modules\sass\sass.dart.js:88627:25)

Expected behavior

No error message

Actual behavior

Error message about no existent variable. See https://bulma.io/documentation/

The text was updated successfully, but these errors were encountered:

kikuomax · 2024-03-22T02:57:29Z

@wesdevpro It looks that Bulma v1 no longer provides color variants as SCSS variables (e.g., $light-invert). In this specific case, I think you can copy what Bulma is doing to initialize $colors: https://github.com/jgthms/bulma/blob/beddf96613c71bd7046e92efab36deee2c2e2125/sass/utilities/derived-variables.scss#L67-L94

$colors: fn.mergeColorMaps(
  (
    "white": (
      iv.$white,
      iv.$black,
    ),
    "black": (
      iv.$black,
      iv.$white,
    ),
    "light": (
      $light,
      $dark,
    ),
    "dark": (
      $dark,
      $light,
    ),
    "text": $text,
    "primary": $primary,
    "link": $link,
    "info": $info,
    "success": $success,
    "warning": $warning,
    "danger": $danger,
  ),
  $custom-colors
) !default;

jaybeecave · 2024-03-23T00:53:44Z

Bulma still supports a lot of these vars. you just need to import the right sass files.

I found searching for the $bulma-variable and following where it lives and then either importing or using "use": to bring in the variables you need to work relatively well. (liek 50% of the components are working)

Its a bit tedious, so I gave up half way and I am going to chip away at this as I use each component.

Example of _datepicker.scss - I just pulled the local scss files from buefy next and included them rather than the css file

@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/components/dropdown" as dd;
@import "bulma/sass/form/shared";

$datepicker-background-color: dd.$dropdown-content-background-color !default;
$datepicker-radius:  dd.$dropdown-content-radius !default;
$datepicker-shadow:  dd.$dropdown-content-shadow !default;
$datepicker-header-color: $grey !default;
$datepicker-today-border: solid 1px rgba($primary, 0.5) !default;
$datepicker-item-color: $grey-dark !default;
$datepicker-item-disabled-color: $grey-light !default;
$datepicker-item-hover-color: $scheme-invert !default;
$datepicker-item-hover-background-color: $background !default;
$datepicker-item-selected-color: cv.getVar("primary-invert") !default;
$datepicker-item-selected-background-color: $primary !default;

....

jaybeecave · 2024-03-23T05:13:26Z

i've been playing with this a bit more.

Better approach is to use "build-bulma": "sass --load-path=node_modules base.scss base.css", with base.scss pulling in a path to the buefy sass. I am going to get a repo going give me a bit of time here

jaybeecave · 2024-03-23T05:42:35Z

buefy-next-bulma-v1-scss

jaybeecave · 2024-03-23T09:12:13Z

making reasonable progress with above.

Datatable
checkbox
radio
inputs

I've got the basic gist of how the scss is working. Pretty amazing stuff in there... The sass function for rendering SVG's is gonna come in handy as

chlumpchatkupt · 2024-03-23T10:02:01Z

Sounds positive. Will the changes be propagated to Buefy (for Vue 2) also or should those who are stuck with Buefy/Vue 2 continue to use Bulma v0.9.4?

@jaybeecave FYI: your repo link leads to a 404.

jaybeecave · 2024-03-23T10:14:27Z

Link fixed. was private

buefy vue 2 should stay with 0.9.4 I think even this project should stay with 0.9.4 because it adds yet another thing that needs an upgrade.

Imagine in a prod env commiting to updating to vue 3 then suddenly you've also got to worry about styling. It needs to be opt in which is why I figured the seperate repo. Maybe this will change or the maintainer will want to use v1 but personally im trying to figure out a pathway to vue 3 for work and buefy v1 wont be part of that migration

wesdevpro · 2024-03-24T02:04:57Z

Link fixed. was private

buefy vue 2 should stay with 0.9.4 I think even this project should stay with 0.9.4 because it adds yet another thing that needs an upgrade.

Imagine in a prod env commiting to updating to vue 3 then suddenly you've also got to worry about styling. It needs to be opt in which is why I figured the seperate repo. Maybe this will change or the maintainer will want to use v1 but personally im trying to figure out a pathway to vue 3 for work and buefy v1 wont be part of that migration

I agree with you to some extent...at least for now. However, after we finally release V1 (i.e. Buefy-next as Buefy) we should consider, in the next major release, to implement Bulma V1. Maybe in Buefy v1.1.0(or v2.0.0) we could migrate Buefy to typescript then maybe in v1.2.0(or v3.0.0) we could migrate to Bulma v1.

Disclaimer: please note I have not discussed these ideas with @kikuomax yet and these events may not occur at all or in this order.

jaybeecave · 2024-03-25T03:11:09Z

💯
buefy with composition api. typescript and bulma v1 is utopia. we will get there 😄

jaybeecave · 2024-03-27T03:44:39Z

My quick testing with this looks ok. If anyone wants to try it out

https://www.npmjs.com/package/buefy-next-bulma-v1-scss

wesdevpro · 2024-04-15T21:27:43Z

I am closing this issue for now. I will bring it back once we start working on migrating to Bulma v1

sukhiboparai · 2024-09-06T04:48:40Z

Hi @wesdevpro Have you guys starting to migrate bulma v1 with vue 3 yet?

wesdevpro · 2024-09-06T04:51:08Z

Hi @wesdevpro Have you guys starting to migrate bulma v1 with vue 3 yet?

@sukhiboparai not yet but keep an eye out for this Issue to be reopened in the future! See #208 (comment)

tsulli · 2024-09-13T18:59:27Z

I'm running into these issues now trying to upgrade a Vue2 app to use Vite / Vue 3 / Bulma v1 with Buefy. Just commenting to show my interest in a Buefy version that supports Bulma v1 + Vue 3!

wesdevpro · 2024-09-13T19:18:14Z

I'm running into these issues now trying to upgrade a Vue2 app to use Vite / Vue 3 / Bulma v1 with Buefty. Just commenting to show my interest in a Buefy version that supports Bulma v1 + Vue 3!

Glad to hear it! Please continue to send feedback this will greatly help us move Buefy forward to better suit your needs

We will get there eventually. Currently working on migrating all the code for Buefy to v3 and TSin

dword-design · 2024-10-04T00:32:54Z

Same here, did a first try and ran into similar issues!

wesdevpro · 2024-10-04T00:35:31Z

Same here, did a first try and ran into similar issues!

The problem lies in the major variable changes/customization made from 0.X.X to v1.0.0 for css variables in Bulma.

wesdevpro added the bug Something isn't working label Mar 21, 2024

wesdevpro assigned kikuomax and wesdevpro Mar 21, 2024

kikuomax added the Bulma v1 label Mar 22, 2024

wesdevpro mentioned this issue Mar 23, 2024

Issues Installing Buefy with Vue2 buefy/buefy#4012

Closed

chlumpchatkupt mentioned this issue Mar 23, 2024

v1 release date? jgthms/bulma#3708

Closed

wesdevpro closed this as not planned Won't fix, can't repro, duplicate, stale Apr 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bulma V1 CSS Variables Issues #208

Bulma V1 CSS Variables Issues #208

wesdevpro commented Mar 21, 2024

kikuomax commented Mar 22, 2024

jaybeecave commented Mar 23, 2024 •

edited

Loading

jaybeecave commented Mar 23, 2024

jaybeecave commented Mar 23, 2024

jaybeecave commented Mar 23, 2024 •

edited

Loading

chlumpchatkupt commented Mar 23, 2024

jaybeecave commented Mar 23, 2024 •

edited

Loading

wesdevpro commented Mar 24, 2024

jaybeecave commented Mar 25, 2024

jaybeecave commented Mar 27, 2024

wesdevpro commented Apr 15, 2024

sukhiboparai commented Sep 6, 2024

wesdevpro commented Sep 6, 2024 •

edited

Loading

tsulli commented Sep 13, 2024 •

edited by wesdevpro

Loading

wesdevpro commented Sep 13, 2024 •

edited

Loading

dword-design commented Oct 4, 2024

wesdevpro commented Oct 4, 2024 •

edited

Loading

Bulma V1 CSS Variables Issues #208

Bulma V1 CSS Variables Issues #208

Comments

wesdevpro commented Mar 21, 2024

Overview of the problem

Description

Steps to reproduce

Expected behavior

Actual behavior

kikuomax commented Mar 22, 2024

jaybeecave commented Mar 23, 2024 • edited Loading

jaybeecave commented Mar 23, 2024

jaybeecave commented Mar 23, 2024

jaybeecave commented Mar 23, 2024 • edited Loading

chlumpchatkupt commented Mar 23, 2024

jaybeecave commented Mar 23, 2024 • edited Loading

wesdevpro commented Mar 24, 2024

jaybeecave commented Mar 25, 2024

jaybeecave commented Mar 27, 2024

wesdevpro commented Apr 15, 2024

sukhiboparai commented Sep 6, 2024

wesdevpro commented Sep 6, 2024 • edited Loading

tsulli commented Sep 13, 2024 • edited by wesdevpro Loading

wesdevpro commented Sep 13, 2024 • edited Loading

dword-design commented Oct 4, 2024

wesdevpro commented Oct 4, 2024 • edited Loading

jaybeecave commented Mar 23, 2024 •

edited

Loading

jaybeecave commented Mar 23, 2024 •

edited

Loading

jaybeecave commented Mar 23, 2024 •

edited

Loading

wesdevpro commented Sep 6, 2024 •

edited

Loading

tsulli commented Sep 13, 2024 •

edited by wesdevpro

Loading

wesdevpro commented Sep 13, 2024 •

edited

Loading

wesdevpro commented Oct 4, 2024 •

edited

Loading