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.