Unable to modify Bulma global or certain component/element variables

[jasonclemens]

Overview of the problem

Oruga version: 0.9.3
Vuejs version: 3.4.0
OS/Browser: does not depend on browser

Description

When trying to set an override value on a Bulma global variable, or a specific component's variable, often times I get the error This module was already loaded, so it can't be configured using "with". Following the "Option B" instructions found here.

Steps to reproduce

This can be reproduced with this SCSS code:

@use "theme/colorMap" as *;

//
// ORUGA/BULMA THEME
// https://github.com/oruga-ui/theme-bulma
//

// Status colors
$primary: colorMap(primary);
$info: colorMap(info);
$success: colorMap(positive);
$warning: colorMap(warning);
$danger: colorMap(danger);
$light: colorMap(light);
$dark: colorMap(dark);

// Modify derived variables here
// https://github.com/jgthms/bulma/blob/main/sass/utilities/derived-variables.scss
@use "@oruga-ui/theme-bulma/dist/scss/bulma" with (
    $primary: $primary,
    $info: $info,
    $success: $success,
    $warning: $warning,
    $danger: $danger,
    $light: $light,
    $dark: $dark,
);

//
// BULMA MODULE CUSTOMIZATION
//

// Component: Tabs
// https://bulma.io/documentation/components/tabs/
@use "bulma/sass/components/tabs" with (
    $tabs-link-active-color: colorMap(primary)
);

// Full Bulma Import
@use "bulma/sass";

This results in the following SASS error:

It appears that the Oruga module has already used the _tabs.scss file, preventing any downstream overrides.

Expected behavior

It is expected that I can use Bulma scss component/element files with variable overrides.

Also, there does not seem to be a way to override Bulma initial variables, found here.

Actual behavior

There needs to be a way to set values for Bulma global and component variables when using the Oruga Bulma theme.

[mlmoravek]

Hey, thanks for sharing your experience!
I'm not too familiar with the new @use / @forward scss syntax, but I'm running into some problems here:

Sure, first I could try to extract the already loaded _tabs.scss file and other already loaded modules, but then we would have to copy the stuff from the Bulma files into the theme, which does not seem like a good practice to me.

Also, there does not seem to be a way to override Bulma initial variables, found here.

Do you have any advice on how to handle this? Should we @farward the utilities/initial-variables.scss file in the theme, even if we don't use it directly?

[jasonclemens]

I'm still getting used to @use / @forward, so I'll need to research how best to allow customization of tabs.

For initial variables, let me try your suggestion locally and see if that allows overriding.

[whiplashwebb]

@jasonclemens this is a whole thing. i hit the same issue a little while ago and i'm working on a solution. The theme recently incorporated changes in Bulma v1 which adopted sass modules and use/forward syntax. MM did a nice job with this version and it works great as long as you don't try to configure with @use with (...). once you try to configure sass starts reading the theme bulma module much more strictly. I honestly don't understand why, I'm still new to sass modules and the docs don't cover edge cases well (or at all!). Anyhow, when you configure it basically turns on strict mode and sass starts throwing the errors you're seeing because of how theme bulma is referencing bulma internally.

I'm going to post a PR in a bit to outline the problem and my solution, but there's going to need to be some discussion about how configuration on the theme is going to working going forward. I'll post it here once it's up.