SassError: Undefined variable: "$main-background-color"

Question

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?

Solution

I believe you need to import the _variables.scss directly into _styles.scss if you want to use them there