0

For example, I have this kind of code

In scss file at the top I have something like this:

$bgc-color: var(--color-daybreak-blue-6);

Then I use this in class, and it works perfectly.

.primary {
  background-color: $bgc-color;
  color: $bgc-color;
}

Now I want to change $bgc-color value based on media queries

@media (min-width: 600px) {
    $bgc-color: var(--color-red-1);
  }

And this is not working, I have still main value $bgc-color: var(--color-daybreak-blue-6);

In my project I used React and Sass, but what may be important I use also scss.modules, so my file is button.module.scss

Does anyone know what I do wrong? in normal css files, when I use css variables is working perfectly :(

Mateusz Matuś Kowalski
  • 721
  • 1
  • 4
  • 7
  • You can follow that [stackOverflow answer](https://stackoverflow.com/questions/17089717/how-to-overwrite-scss-variables-when-compiling-to-css) – Erikwski Dec 07 '22 at 12:05
  • Does this answer your question? [How to overwrite SCSS variables when compiling to CSS](https://stackoverflow.com/questions/17089717/how-to-overwrite-scss-variables-when-compiling-to-css) – Arkellys Dec 07 '22 at 13:05

0 Answers0