Overwriting a Sass Color Map with @use ... with Fails: Undefined Variable

This is our repository structure. In public/scss/ are all default SCSS files that provide basic styling to the website. And everything that comes from base/themes can overwrite the stuff in src. So far so good. Normal SCSS overwrite works as it should but as soon as I want to overwrite the color map from variables in the customer_theme.scss it either will not work or won't allow our compiler (sass embedded linux x64 v1.83.4) to build the .css file

├── src/
│   └── layouts/
│       └── public/
│           └── scss/
│               └── _variables.scss
└── base/
    └── themes/
        └── customer_theme/
            └── public/
                └── scss/
                    └── customer_theme.scss

I have a default variables.scss where the basic color map is defined

@use "sass:map";
@use "sass:color";

// ROOT
$scale : 2 !default;
$base-font-size: calc(16px + .02vw) !default;

// COLORS
$colors: (
  primary: #526066,
  corporate: #000000,
  light: #ffffff,
  accent: #1ebdff,
  neutral: #cecece,
  warning: #ff0000,
  offered: #554BDD,
  hint: #ffdd00,
  confirmed: #00af00) !default;

And this is the map in the customer_theme.scss

@use "sass:map";
@use "sass:color";
@use "layout/variables" as * with ($scale: 2,
  $base-font-size: calc(16px + .02vw),
  $font_1: "Source Sans 3",
  $colors: map.merge($colors, (primary: #02305F,
      corporate: #000000,
      light: #ffffff,
      accent: #E30916,
      neutral: #cecece,
      warning: #ff0000,
      offered: #554BDD,
      hint: #ffdd00,
      confirmed: #00af00,
    )));

This is the error I get when I try to build the website with the second map:

panic: Error compiling scss: 400 Bad Request: message: Undefined variable. stack: theme/customer_theme.scss 6:29  @use
 - 15:1                  root stylesheet

Why does using with to override the $colors map result in an undefined variable error?

EDIT:

I have tried it with @forward "variables". Which gave me two other Errors, due to our build logic, after resolving those I get the same error as in the beginning.

The problem is that $colors is not in scope during with. with is only supposed to assign values to variable not execute expression (in your case map.merge(...)).

Solution: You should first import once the variables are in current scope then you can use them as you want. You can modified your customer_them.scss like this:

@use "sass:map";
@use "sass:color";
@use "layout/variables" as variables with (
  $scale: 2,
  $base-font-size: calc(16px + 0.02vw),
  $font_1: "Source Sans 3"
);

$colors: map.merge(
  variables.$colors,
  (
    primary: #02305f,
    corporate: #000000,
    light: #ffffff,
    accent: #e30916,
    neutral: #cecece,
    warning: #ff0000,
    offered: #554bdd,
    hint: #ffdd00,
    confirmed: #00af00
  )
);

Also I have noticed you are overriding $font_1 with is not defined in variables file it will give you error. Make sure to define this variable and mark it as !default.

Hope it will resolve your issue.