title: How can I have sass variables accessed within a Webpack import?
body: <p>I'm having a difficult time figuring out how I can access Sass variables within a React component's sass file import. Here's my current directory structure, where I'm using Webpack to bundle everything:</p>
  
  <pre><code>components/
    Sample/
      Sample.jsx
      Sample.scss
  sass/
    main.scss
    variables.scss
  </code></pre>
  
  <p>Inside of <code>Sample.jsx</code>, I am importing <code>Sample.sccs</code>, however, the variables from variables.scss are not coming through, as I assume since they are separate modules, they don't share the same context?</p>
  
  <p>I understand that I could fix this by simple not requiring the styles within the components's <code>.jsx</code> file but rather just import them all individually within <code>main.scss</code>, so they share the same context, but it would be nice to keep everything encapsulated.</p>