Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
chamilleri opened this issue Feb 3, 2020 · 13 comments · Fixed by #3176 · 4 remaining pull requests
Closed

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

chamilleri opened this issue Feb 3, 2020 · 13 comments · Fixed by #3176 · 4 remaining pull requests

Comments

@chamilleri
Copy link

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
Copy link
Author

There is a post on Sass which refers to this issue: sass/sass#2809 (comment)

@jgthms
Copy link
Owner

jgthms commented Feb 3, 2020

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

@twaiiiin
Copy link

twaiiiin commented Feb 4, 2020

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

Namespacing variables is a good idea indeed.

@bkarlson
Copy link

bkarlson commented Feb 7, 2020

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
Copy link
Author

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

@Pipzero
Copy link

Pipzero commented Apr 8, 2020

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

bulma_solution

@muodov
Copy link

muodov commented Oct 6, 2020

Is there any update on this?

@AEsmerio
Copy link

AEsmerio commented Oct 6, 2020

Same issue here

@janhaa
Copy link

janhaa commented Oct 30, 2020

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

@fredDesign
Copy link

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
Copy link
Owner

jgthms commented Nov 17, 2020

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

@MrToxy
Copy link

MrToxy commented Mar 10, 2021

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
Copy link

PixsaOJ commented Jun 14, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment