@use "bulma/sass" with (); may conflict with Modularity

[gxres042]

This is about Bulma, and it is a question.

Overview of the problem

This is about the Bulma CSS Framework, version 1.0. I am sure this issue is not a duplicate.

Description

I manually imported sass file of bulma, but seems like it was conflict with this:

I don't have an idea for that. Now I need to configure the color of $link.

Steps to Reproduce

Like the description.

Expected behavior

No

Actual behavior

I need to configure $link with derived-variables.scss, but if I write:

@use "bulma/sass/utilities/derived-variables" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-shadow: none
);

Console will print:

Error: This module was already loaded, so it can't be configured using "with".
  ┌──> valaxy-theme-custom\styles\ui.scss
15│ ┌ @use "bulma/sass/utilities/derived-variables" with (
16│ │   $link: hsl(207, 61%, 53%)
17│ │ );
  │ └─^ new load
  ╵
  ┌──> node_modules\.pnpm\bulma@1.0.0\node_modules\bulma\sass\utilities\controls.scss
2 │   @use "derived-variables" as dv;
  │   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
  ╵

[wanted80]

Hi,

a similar problem maybe occour when you want to set a variable inside the "use with" syntax with another variable of Bulma:

$site-green-color: #14552b;
$site-red-color: #c00000;
$site-orange-color: #f9b700;

@use "bulma/sass/utilities/initial-variables" as iv;

@use "bulma/sass" with (
  $red: $site-red-color,
  $green: $site-green-color,
  $orange: $site-orange-color,

  $box-radius: iv.$radius, // default is radius-large
);

Output:

Error: This module was already loaded, so it can't be configured using "with".
    ┌──> node_modules/bulma/sass/utilities/_index.scss
4   │   @forward "initial-variables";
    │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
    ╵
    ┌──> resources/scss/app.scss
10  │   @use "bulma/sass/utilities/initial-variables" as iv;
    │   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
... │
13  │ ┌ @use "bulma/sass" with (

[KriKrixs]

I'm facing the exact same problem ... This is really frustrating...

[jgthms]

So this happens because if you import bulma/sass and then bulma/sass/utilities, you're importing the file bulma/sass/utilities/initial-variables.scss twice.

The solutions it to not import everything with bulma/sass, but rather, only import bulma/sass/utilities and override its Sass variables.

Here is an example:

@use "sass:color";

// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Override global Sass variables from the /utilities folder
@use "bulma/sass/utilities" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px
);

// Override Sass variables from the /form folder
@use "bulma/sass/form" with (
  $input-shadow: none
);

// Import the components you need
@forward "bulma/sass/base";
@forward "bulma/sass/components/card";
@forward "bulma/sass/components/modal";
@forward "bulma/sass/components/navbar";
@forward "bulma/sass/elements/button";
@forward "bulma/sass/elements/button";
@forward "bulma/sass/elements/icon";
@forward "bulma/sass/elements/content";
@forward "bulma/sass/elements/notification";
@forward "bulma/sass/elements/progress";
@forward "bulma/sass/elements/tag";
@forward "bulma/sass/layout/footer";

// Import the themes so that all CSS variables have a value
@forward "bulma/sass/themes";

// Import the Google Font
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");

If you are not overriding Sass variables with the keyword with, you can simply use @forward instead of @use.