Overrides not working anymore

[steven-twerdochlib]

Hi, I'm upgrading from bulma v0.9.4 to v1.0.4 and I've done what I can, there are no errors but my app is no longer using the variables in my variables.scss file.

My variables.scss is something like:

 $column-gap: 0.94rem
 $yellow: #ffbf47,
 $widescreen-enabled: false,

and I import this into my main like so:

@use './variables' as *;
@use "bulma/sass/utilities/initial-variables" as iv with (
  $yellow: #ffbf47,
  $widescreen-enabled: false,
);
@use "bulma/sass/utilities/mixins" as bulmaMixins;
@use 'bulma/bulma' as *;

For some reason I needed to import initial-variables individually because it couldn't find variables like $white-ter which I used. So after importing I turned it into iv.$white-ter. Overriding like I've done for $yellow in iv with (...) works in overriding but $column-gap isn't in utilities folder. It seems ridiculous that I'd have to individually import all the folders I need and override them separately for different variables. There must be a better way right?

Old code for reference:

@import 'variables';
@import 'bulma/bulma.sass';
@import 'mixin';
@import 'fcn';

So ultimately my questions are: why do I have to call iv.$white-ter to use it now compared to 0.9.4 where $white-ter worked just fine? How can I do overrides for all variables in all files instead of importing them all individually and overriding them individually?

[blm768]

why do I have to call iv.$white-ter to use it now compared to 0.9.4 where $white-ter worked just fine?

You're importing initial-variables with the namespace name iv instead of the wildcard *, so Sass only makes the names visible under iv. If you use the wildcard, the names will become directly visible in the parent scope. with is still necessary in order to override them, though.

[…] but $column-gap isn't in utilities folder.

The options there are:

1. As you noted, to import the individual component files directly and override them in the with block, or
2. Use CSS custom properties to override the value at runtime:

   :root {
     --bulma-column-gap: 0.94rem;
   }