title: ReactJS - Unable to import scss globally across components
body: <p>I am using create-react-app (without ejection) for one of my application, and have the following folder structure:</p>
  <pre><code>/src
      assets
          scss
              abstract
                  _variables.scss
                  _mixins.scss
          _global.scss
      components
          Welcome
              Welcome.js
              Welcome.scss
      App.js    
      App.scss
  </code></pre>
  <p>The contents of the files are below:</p>
  <p><strong>_variables.scss</strong></p>
  <pre><code>$color-info: #f45a40;
  </code></pre>
  <p><strong>global.scss</strong></p>
  <pre><code>@import &quot;./abstract/variables&quot;;
  @import &quot;./abstract/mixins&quot;;
  </code></pre>
  <p><strong>App.scss</strong></p>
  <pre><code>@import &quot;assets/scss/global&quot;;
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./App.scss&quot;
  import Welcome from &quot;./components/Welcome&quot;
  
  
  const App = () =&gt; {
    return (
      &lt;Welcome /&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p><strong>Welcome.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./Welcome.scss&quot;
  
  const Welcome = () =&gt; {
    return (
      &lt;div class=&quot;text-color&quot;&gt;Some test here&lt;/div&gt;
    );
  };
  
  export default Welcome;
  </code></pre>
  <p><strong>Welcome.scss</strong></p>
  <pre><code>.text-color {
      color: $color-info;
  }
  </code></pre>
  <p>Since i am already including the &quot;global.scss&quot; in &quot;App.scss&quot;, should it not automatically make all partials available for components like &quot;Welcome.js&quot;? Unfortunately its not, its throwing me the following error in &quot;Welcome.scss&quot; file:</p>
  <blockquote>
  <p>SassError: Undefined variable: &quot;$color-info&quot;.</p>
  </blockquote>
  <p>But, if I include 'global.scss' in the &quot;Welcome.scss&quot; file, then it works fine. I do not want to include global.scss in each and every component, is there a way to make this work?</p>