SassError: Undefined variable-CodePudding

I have a variable file that has two definitions of themes I want to overwrite:

_vars.scss

body {
  $bg-color: #fff
}
body.theme-dark {
  $bg-color: #333
}

I´m calling the variables in my Angular button component:

button.scss

@import '_vars.scss';

.button {
  background-color: $bg-color;
}

But I´m getting the following compiling error:

SassError: Undefined variable.

background-color: $bg-color;

Whats is the right way to overwrite variables depending on my body theme class? Thanks

CodePudding user response：

You define $bg-color depending on the theme, but never $font-size-18.

On a side note, I would consider to use CSS Custom Properties instead of SASS variables if I was in your shoes. Codyhouse have an interesting and easy to understand article about this, which also talks about color themes.

If you want to dig deeper into this topic you may want to read this article.

CodePudding user response：

First of all variables inside scope valid only in that scope not universally. Now for your question see below :-

_vars.scss

Instead of making variables inside body scope create it in global scope.

$bg-color: #fff;

body {
  background-color: $bg-color;
}

and then import it in your button.scss without underscore "_"

import "vars";

button {
  background-color: $bg-color;
}