Webpack not loading SCSS with react-toolbox
<p>I am trying to bootstrap a new react app and use the react-toolbox library and webpack. I am unable to get both react-toolbox's styles and my own app's styles to load.</p>

<p>The way I'm used to importing scss files is from the react files/views/components they go with, so they are located in the same folder. So if I have a react component file called header.js, in the same directory there is header.scss. Header.js calls <code>import './header.scss'</code>. In webpack, what I previously used to load scss was: </p>

<pre><code>        {
            test: /\.s?css$/i,
            loader: 'style!css!sass?' +
                'includePaths[]=' + (path.resolve(__dirname, './node_modules')),
        },
</code></pre>

<p>But when I include react-toolbox, this setup completely excludes react-toolbox's styles. I found this issue <a href="https://github.com/react-toolbox/react-toolbox/issues/121" rel="nofollow">https://github.com/react-toolbox/react-toolbox/issues/121</a> where mattgi recommends this webpack-config:</p>

<pre><code>        {
           test    : /(\.scss|\.css)$/,
           include : path.join(__dirname, '../../', 'src'),
           loaders : [ 'style', 'css', 'sass' ]
         },
         {
           test    : /(\.scss|\.css)$/,
           include : /(node_modules)\/react-toolbox/,
           loaders : [
             require.resolve('style-loader'),
             require.resolve('css-loader') + '?sourceMap&amp;modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]',
             require.resolve('sass-loader') + '?sourceMap',
           ]
         },
</code></pre>

<p>This resolves the react-toolbox styles not loading, but then when I try to import my <em>own</em> scss files in a js file, webpack throws this error for the scss file: <code>You may need an appropriate loader to handle this file type.</code> (I have sass-loader installed).</p>

<p>In addition, if I include the scss file in the same directory with the same name (some-react-class.js and some-react-class.scss), the containing component of SomeReactClass that is importing some-react-class.js imports it as an object instead of a function which makes it seem like it is importing the scss instead of the js.</p>

<p>Help :(</p>