Bulma: 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?

[3rdSenna]

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.

[FeixuRuins]

Any updates? Anything that I import gives me an undefined variable error. The only thing that works is if I import bulma/all, which ruins the whole modular aspect.
I'm using node-sass-middleware and Bootstrap worked fine :\
EDIT: I was importing things in the wrong order. Sorry.