I'm trying to use CSS-variables during the LoginPage component styling but receiving the following error:
SassError: Undefined variable: "$main-background-color".
This error appears in the _styles.scss file.
this is my project structure:
I'm importing both _variables.scss and styles.scss to the main index.scss file:
What I'm doing wrong while importing variables?
Why I can't use them in the _styles.scss file?
I believe you need to import the _variables.scss directly into _styles.scss if you want to use them there
Is $main-background-color your css variable (as in custom property) or did you define it as a Sass variable?
If it is an actual css variable/custom property you need to use it like this: var(--main-background-color) and as a global variable it needs to be defined at :root {} or any other top element like <body> or <html>.
If it is a Sass variable you need to make sure which file you're trying to compile. You can't compile _styles.scss on its own, it has to be index.scss and you need to make sure that your compiler isn't trying to compile modules (files starting with _) first as this would of course fail.
The @import command basically just copies everything together so loading it in multiple locations would add this multiple times. Sass modules avoid this with heir @use command but this is only supported in Dart Sass and not LibSass.
