Search code examples
reactjssasscss-modulesscss-mixins

Importing variables scss

I am using scss for the first time

I created a file in src/styles/variables.scss

$background-color: #323132;

Then on src/components/MyComponent.module.scss

@use "src/styles/variables";

.content {
  background-color: variables.$background-color;  
}

And I get

SassError: Invalid CSS after "...olor: variables": expected expression (e.g. 1px, bold), was ".$background-color;"
        on line 14 of src/components/MyComponent.module.scss
>>   background-color: variables.$background-color;

I can't find what is wrong? thank you

Solution

  • Just import your variables instead and use directly

    @import "src/styles/variables";

.content {
  background-color: $background-color;  
}