title: How to use scss variables in create react app?
body: <p>I create my app with <code>create-react-app</code> and I try to use shared scss files. I have folder with them files <code>common/styles/</code>. And also I have some scss files there (<code>_reset.scss, _variables.scss</code>).</p>
  
  <p>My _variables.scss:</p>
  
  <pre><code>$color-main: #1E700F;
  </code></pre>
  
  <p>My index.scss:</p>
  
  <pre><code>@import "variables";
  </code></pre>
  
  <p>Then I connect my <code>index.scss</code> and my <code>index.js</code> file</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './common/styles/index.scss';
  import App from './App';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>Then I create <code>Button</code> component in folder <code>common/components/Button</code>. And I want to use  in my <code>Button.scss</code> next code:</p>
  
  <pre><code>.button {
    border: 1px solid $color-main;
    color: $color-main;
  }
  </code></pre>
  
  <p>After I import my <code>Button.scss</code> to <code>Button.js</code> file I have next error:</p>
  
  <pre><code>SassError: Undefined variable: "$color-main".
  </code></pre>