title: Resolving SCSS global variables with Webpack
body: <p>I'm having trouble getting my scss global variables file to resolve. I'm trying to add a scss color file which I can simply import globally wherever it's needed.</p>
  
  <p>Webpack 1 config:</p>
  
  <pre><code>  module: {
      loaders: [
        {
          test: /\.scss$/,
          loader: 'style' +
          '!css' +
            '?sourceMap' +
            '&amp;modules' +
            '&amp;importLoaders=1' +
            '&amp;localIdentName=[local]__[hash:base64:4]' +
          '!sass' +
            '?sourceMap'
        }
      ]
    },
    sassLoader: {
      includePaths: [
          path.resolve(__dirname, '../src/&lt;path to stylesheets&gt;/themes')
        ]
    },
  </code></pre>
  
  <p>Sass File</p>
  
  <pre><code>@import "colors";
  
  .add {
    background: $button-inactive-state;
  }
  </code></pre>
  
  <p>Error Code (some personal items redacted)</p>
  
  <pre><code>./~/css-loader?sourceMap&amp;modules&amp;importLoaders=1&amp;localIdentName=[local]__[hash:base64:4]!./~/sass-loader/lib/loader.js?sourceMap!./src/&lt;path to file&gt;/toggle-item-button/item-icon.scss
  Module build failed: 
  @import "colors";
  ^
        File to import not found or unreadable: colors
  Parent style sheet: stdin
        in /Users/&lt;me&gt;/Checkouts/&lt;my project&gt;/src/&lt;path to file&gt;/toggle-item-button/item-icon.scss (line 1, column 1)
  Error: 
  @import "colors";
  ^
        File to import not found or unreadable: colors
  Parent style sheet: stdin
        in /Users/&lt;me&gt;/Checkouts/&lt;my project&gt;/src/&lt;path to file&gt;/toggle-item-button/item-icon.scss (line 1, column 1)
    at options.error (/Users/&lt;me&gt;/Checkouts/&lt;my project&gt;/node_modules/node-sass/lib/index.js:286:26)
  
   @ ./src/&lt;path to file&gt;/toggle-item-button/item-icon.scss 4:14-229
  </code></pre>