title: Parcel: using separate SCSS files for each React component, but with a variables file
body: <p>I'm trying to find my way in setting up an efficient web development workflow even though I am new to React and bundlers (and the combi of these two). My goal is to have each React component use its own SCSS file, which can't be accessed by other components' stylesheets. There needs to be some global files though, like a <code>variables.scss</code>, which is where the problem lies.</p>
  
  <p>This is how my file structure (from the src folder) looks at the moment:</p>
  
  <pre><code>├── assets
  ├── components
  │   ├── App
  │   │   ├── index.js
  │   │   └── index.scss
  │   ├── Taskbar
  │   │   ├── index.js
  │   │   └── index.scss
  │   └── Window
  │       ├── index.js
  │       └── index.scss
  ├── index.js
  └── sass
      ├── mixins.scss
      └── variables.scss
  </code></pre>
  
  <p>I'm using Parcel with node-sass to import these SCSS files. As you can see, each component has its own folder with a SCSS file in it.</p>
  
  <p>Each component loads its designated stylesheet like this:</p>
  
  <pre><code>import React from 'react';
  import './index.scss';
  import Taskbar from '../Taskbar';
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;div id="app"&gt;
          &lt;Taskbar /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>I like to keep this approach, as the stylesheets are only used if the components themselves are imported.</p>
  
  <h1>The problem</h1>
  
  <p>If you take one more look at my file structure, there are two files in the sass folder (variables.scss and mixins.scss). I want all the files in that folder to be accessible to all components.</p>
  
  <p>I've tried to just plain simple import the files in the App, so it can be accessed in all files, like so:</p>
  
  <pre><code>import '../../sass/variables.scss';
  import '../../sass/mixins.scss';
  </code></pre>
  
  <p>These do load of course, but I can't use the variables and functions declared in these files in, for example, <code>Taskbar/index.scss</code>.</p>
  
  <p>So that would make my question: How do I use these global sass variables/functions in "protected" SCSS files?</p>