I'm trying to use CSS-variables during the LoginPage ponent 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'm trying to use CSS-variables during the LoginPage ponent 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?
- Path to the file is wrong from what I can tell here. Should be ../general – Phix Commented Feb 23, 2020 at 20:07
2 Answers
Reset to default 5I 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 pile. You can't pile _styles.scss on its own, it has to be index.scss and you need to make sure that your piler isn't trying to pile modules (files starting with _) first as this would of course fail.
The @import mand basically just copies everything together so loading it in multiple locations would add this multiple times. Sass modules avoid this with heir @use mand but this is only supported in Dart Sass and not LibSass.