title: SassError: Undefined variable: "$main-background-color"
body: <p>I'm trying to use CSS-variables during the LoginPage component styling but receiving the following error: 
  <code>SassError: Undefined variable: "$main-background-color".</code>
  This error appears in the <code>_styles.scss</code> file.</p>
  
  <p>this is my project structure:</p>
  
  <p><a href="https://i.stack.imgur.com/t8DsX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/t8DsX.png" alt="project structure"></a></p>
  
  <p>I'm importing both <code>_variables.scss</code> and <code>styles.scss</code> to the main <code>index.scss</code> file: </p>
  
  <p><a href="https://i.stack.imgur.com/MxZlZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MxZlZ.png" alt="index.scss"></a></p>
  
  <p>What I'm doing wrong while importing variables? 
  Why I can't use them in the <code>_styles.scss</code> file? </p>