SASS error when configuring a forwarded module that has been used before

Question

I have two modules. In the first module (module_a) I have a css for variables and one for helpers. In the helpers I use the variables. When I try to forward the module_a in module_b with default values, then I get this error:

Error: This module was already loaded, so it can't be configured using "with".

Here the files I used:

/module_a/index.scss

@forward './styles/index';

/module_a/styles/_index.scss

@forward 'helpers';
@forward 'variables';

/module_a/styles/_helpers.scss

@use './variables';

/module_a/styles/_variables.scss

$color: black !default;

/module_b/index.scss

@forward '../module_a/index' with (
  $color: green,
);

Did I misunderstand the concept of sass? How should I handle my case?

Answer 1

So my issue was the order of the forwards in /module_a/styles/_index.scss

I had to change from

@forward 'helpers';
@forward 'variables';

to

@forward 'variables';
@forward 'helpers';

as described in the saas doc https://sass-lang.com/documentation/at-rules/forward

If you do write both a @forward and a @use for the same module in the same file, it’s always a good idea to write the @forward first. That way, if your users want to configure the forwarded module, that configuration will be applied to the @forward before your @use loads it without any configuration.