CODEWITHSUNDEEP
sasssass-maps
MrJoky
MrJoky

Reputation: 294

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.

Upvotes: 2

Views: 71

Answers (1)

Muhammad Saqib
Muhammad Saqib

Reputation: 388

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.

Upvotes: 1

Related Questions