title: Storybook custom webpack loading empty scss objects
body: <p>I added a custom <strong>webpack.config.js</strong> file to my <code>.storybook</code> project so that I can import <code>.scss</code> files. This is what I added, straight from the storybook docs.</p>
  
  <pre><code>const path = require('path');
  
  // Export a function. Accept the base config as the only param.
  module.exports = (storybookBaseConfig, configType) =&gt; {
    // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
  
    // Make whatever fine-grained changes you need
    storybookBaseConfig.module.rules.push({
      test: /\.scss$/,
      loaders: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, '../src')
    });
  
    // Return the altered config
    return storybookBaseConfig;
  };
  </code></pre>
  
  <p>Here's my story:</p>
  
  <pre><code>import React from 'react';
  import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
  import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies
  import { linkTo } from '@storybook/addon-links'; // eslint-disable-line import/no-extraneous-dependencies
  import Button from './'
  import ButtonStyles from './index.scss'
  import ButtonCompareTrayStyles from './compare-tray.scss'
  import ButtonCompareRemminderStyles from './compare-reminder.scss'
  
  console.log({ButtonStyles, ButtonCompareTrayStyles, ButtonCompareRemminderStyles})
  
  storiesOf('Button', module)
    .add('with text', () =&gt; &lt;Button onClick={action('clicked')}&gt;Hello Button&lt;/Button&gt;)
    .add('with some emoji', () =&gt; &lt;Button onClick={action('clicked')}&gt;   &lt;/Button&gt;)
    .add('with default styles', () =&gt; &lt;Button styles={ButtonStyles} onClick={action('clicked')}&gt;Hello World&lt;/Button&gt;)
    .add('with CompareTray styles', () =&gt; &lt;Button styles={ButtonCompareTrayStyles} onClick={action('clicked')}&gt;Hello World&lt;/Button&gt;)
    .add('with CompareRemminder styles', () =&gt; &lt;Button styles={ButtonCompareRemminderStyles} onClick={action('clicked')}&gt;Hello World&lt;/Button&gt;)
  </code></pre>
  
  <p>When I log some Button styles, it appears that each one of these objects is empty.</p>
  
  <p><a href="https://i.stack.imgur.com/CQv2f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CQv2f.png" alt="enter image description here"></a></p>
  
  <p>Why are these objects empty? How can I get scss working with storybook?</p>