title: Global scss variables in create-react-app
body: <p>In my src folder, I have assets/styles folder where my global scss files are.</p>
  <p>In my <code>index.scss</code> I import them like this</p>
  <pre><code>@import 'assets/styles/colors.scss';
  @import 'assets/styles/links.scss';
  @import 'assets/styles/basics.scss';
  </code></pre>
  <p>And then in index.js, I import compiled <code>index.css</code></p>
  <p>Problem: In <code>basics.scss</code> I'm using variable from <code>colors.scss</code> and getting an error <code>Undefined variable: \&quot;$black\&quot;.</code></p>
  <p>And the same happens in components scss files if they use variables from that file. I really don't want to import colors in every single component. Is there a way to make these 3 files global?</p>
  <p>To work with scss in reacting I'm using <a href="https://github.com/facebook/create-react-app/blob/69c3d4b04c233ba9fb9d16691056bd09076177b1/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc" rel="nofollow noreferrer">Adding a CSS Preprocessor (Sass, Less etc.)</a> (Since moved <a href="https://create-react-app.dev/docs/adding-a-sass-stylesheet/" rel="nofollow noreferrer">here</a>).</p>
  <p><strong>UPD</strong><br />
  <a href="https://i.stack.imgur.com/T5pJ4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T5pJ4.png" alt="enter image description here" /></a></p>