title: How to use SCSS variables into my React components
body: <p>I am working on a React project that follows this structure</p>
  
  <pre><code>src |
    components |
      Footer |
        index.jsx
        styles.scss
      Header |
        index.jsx
        styles.scss
      scss |
        helpers.scss
        variables.scss
        ...
      main.scss
  </code></pre>
  
  <p>Into my variables file I was using the <code>css</code> custom variables so, all them where on <code>:root</code> and I can access them in my components styles.</p>
  
  <p>When I wanted to create the dark colours I wanted to use the SCSS function <code>darken</code>, but it does not evaluate them and throws an error saying that <code>var(--blue)</code> is not a valid colour.</p>
  
  <p>As a solution I decided to move all the variables into a SCSS variables but when project is building it throws another error that says that a <code>$blue</code> is not defined.</p>
  
  <p>The unique solution possible I can use, it is to include the variables file in all the styles files but, I do not know if there are a better solution for the structure that I am using.</p>