Unable to fully use Bulma Sass with the new Sass modular system (@use)

[chamilleri]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.8.0]

This is a Sass issue: I'm using version [1.25.0] (Dart Sass) I am sure this issue is not a duplicate

Description

I was refactoring code to start using the new Sass modular system and at first it was ok, but once I tried to use navbar.sass directly the compiler started complaining: SassError: Undefined variable. 1 │ $navbar-background-color: $scheme-main !default I tried several options like placing the variable in the file I am calling this from, pushing the variable though with the 'with' option, calling @import on the derived-variables but nothing worked. I feel that the Bulma structure would need to be updated to support this.

Steps to Reproduce

1. @use "~bulma/sass/components/navbar.sass" with ( $scheme-main: "red" );
2. compile

Expected behavior

It compiles

Actual behavior

Get an error SassError: Undefined variable. 1 │ $navbar-background-color: $scheme-main !default

[chamilleri]

There is a post on Sass which refers to this issue: https://github.com/sass/sass/issues/2809#issuecomment-573942660

[jgthms]

Interesting. I will start working on upgrading Bulma to this new system.

[twaiiiin]

A little bit of context: https://sass-lang.com/blog/the-module-system-is-launched

Namespacing variables is a good idea indeed.

[bkarlson]

This is kinda breaking change for Bulma, as moving to Yarn 2 (Berry) we don't have node_modules anymore and have to resort to @use and @forward, none of which work with current Bulma release. I'm not well versed in Sass unfort, so cannot help here, but maybe if this issue gets more attention, someone from this community can help move to new modular system sooner.

[chamilleri]

I would just like to check if this issue is being addressed.

[Pipzero]

This is kinda breaking change for Bulma, as moving to Yarn 2 (Berry) we don't have node_modules anymore and have to resort to @use and @forward, none of which work with current Bulma release. I'm not well versed in Sass unfort, so cannot help here, but maybe if this issue gets more attention, someone from this community can help move to new modular system sooner.

@jgthms

I have managed to eliminate the error by prefixing underscore ( ) to all the Sass files. Also, remove all the underscore ( ) in your @import file name, as well as the ".sass" file extension

[muodov]

Is there any update on this?

[AEsmerio]

Same issue here

[janhaa]

Are there concrete ways to help here? I just updated bulma and unfortunately face the same issue. Any directions?

[fredDesign]

Im really disapointed by this system The navbar scss use a color map with only 2 colors , one for the background , the other for the text-color. There is some manipulation based on lighten/darken for the others states . Its really limited for make a design . Hope for remove the manipulations and use at least 4 colors (background,color, activebackground, active color ) maybe more.

[jgthms]

Yes this could be improved. Some of the manipulations are done for the colors map but could be moved globally.

[MrToxy]

I was able to actually make this work without any additional packages:

vendors/_bulma.scss

@charset "utf-8";
@use '~bulma/sass/utilities/initial-variables'as * with(
  $red: pink
);

@use '~bulma/bulma' with(
  $danger: blue,
  $success: $red,
);

vendors/index.scss

@use 'bulma';

index.scss

@use 'vendors';

Note: since ~/bulma/bulma simply imports everything it means that the variables are globally available within that file, thus the combination of the !default keyword on any variable imported in that file with the usage of the @foruseward with will mean that you'll be overriding those variables. Hope this was helpful. This should continue to work as long as bulma keeps forwarfing their variables

The only issue I face is the fact that I need to keep importing bulma variables in other places to be able to use them which is annoying

[PixsaOJ]

@MrToxy What if I have colors.css file with all the custom colors to pass with bulma?