@use pass configuration as a map variable

[rwasef1830]

Hello,
I want to load bootstrap scss with some variables overridden. So I got my variables in a _variables.scss

_variables.scss

$bootstrap-overrides: (
    primary: green
);

main.scss

@use "variables";
@use "lib/bootstrap/scss/bootstrap" with (variables.$bootstrap-overrides);

The compiler scolds me, I can't do that "syntax error".... I search and find that meta load-css function...
So I try again...

main.scss

@use "variables";
@include meta.load-css("lib/bootstrap/scss/bootstrap", variables.$bootstrap-overrides);
// I need to refer to bootstrap inside this file so I go ahead and use it, knowing that
// the include must come first because you can't configure a module except the first time it's loaded
// and that meta.load-css and use won't load modules loaded by each other multiple times.
@use "lib/bootstrap/scss/bootstrap";

I get scolded by the compiler again: "@use rules must be written before any rules"...

So how am I supposed to pass overrides from a map to a module being loaded ? Is there really no way except spell every variable out one by one again ? The problem is that I want to have this bootstrap loading part in a framework, so that in different projects I can pass different bootstrap variables to override....

I can't figure a solution to this problem... Is there any workaround ? I got very frustrated and angry feeling like I am boxed in blocked from very direction with seemingly arbitrary limitations with no way of escape...

Cross reference from a similar unanswered stackoverflow question:
https://stackoverflow.com/questions/69382592/how-to-use-scss-with-map-variable

[rwasef1830]

I tried making a _bootstrap-loader.scss file

_bootstrap-loader.scss

@use "sass:meta";
@use "variables";
@include meta.load-css("lib/bootstrap/scss/bootstrap", variables.$bootstrap-overrides);

Then in my main.scss

@use "bootstrap-loader";
@use "lib/bootstrap/scss/bootstrap";

I ended up with 2 complete copies of bootstrap in my CSS. It seems @use and the deduplication only happens in the same file ?
This is frustrating.

EDIT:
I tried:
_bootstrap-loader.scss

@use "sass:meta";
@use "variables";
@include meta.load-css("../../../WebFramework/wwwroot/lib/bootstrap/scss/bootstrap", variables.$bootstrap-overrides);
@forward "../../../WebFramework/wwwroot/lib/bootstrap/scss/bootstrap";

main.scss

@use "bootstrap-loader" as bootstrap;

And got scolded by the compiler "@forward must come first" ... 😢
Anybody have any solution or workaround ?

[nex3]

There's no way to pass a map as a configuration. You do indeed need to specify each variable individually.

The problem is that I want to have this bootstrap loading part in a framework, so that in different projects I can pass different bootstrap variables to override....

Configurable variables work through @forwards, so if you just want bootstrap's existing variables to be configurable, you can just forward it and anyone who @uses your module will be able to configure it through your module. For example:

// _wrapper-framework.scss
@forward 'bootstrap';

// Use bootstrap variables/mixins here.

// main.scss
@use 'wrapper-framework' with (
  $primary: green
);

It seems @use and the deduplication only happens in the same file ?

When you @include meta.load-css(), it includes all the CSS in the loaded module as though it were the body of a mixin. This means that if you write multiple meta.load-css() calls, or you load the same module through meta.load-css() and @use/@forward, you'll get multiple copies of the CSS.