title: Import scss file is not working inside storybook file
body: <p>I'm currently facing issue on storybook react using <strong>scss</strong>. I'm using <strong>sb init</strong> to create the storybook file. Everything is working, all the addons loaded but only the style is not working. If I use <code>css</code> file, the style will be working.</p>
  <p>I'm already following the instruction from documentation on using <code>@storybook/preset-scss</code> and the <code>webpackFinal</code> config, but it still not working</p>
  <p>this is a sample from storybook file</p>
  <p><strong>import './button.scss';</strong> is not working properly</p>
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  import './button.scss'; -&gt; this one not working
  
  export const Button = ({ primary, backgroundColor, size, label, ...props }) =&gt; {
    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
    return (
      &lt;button
        type=&quot;button&quot;
        className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
        style={backgroundColor &amp;&amp; { backgroundColor }}
        {...props}
      &gt;
        {label}
      &lt;/button&gt;
    );
  };
  
  Button.propTypes = {
    primary: PropTypes.bool,
    backgroundColor: PropTypes.string,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func,
  };
  
  Button.defaultProps = {
    backgroundColor: null,
    primary: false,
    size: 'medium',
    onClick: undefined,
  };
  </code></pre>
  <p>this is my <code>/storybook/main.js</code> file</p>
  <pre><code>const path = require('path')
  
  module.exports = {
    &quot;stories&quot;: [
      &quot;../src/**/*.stories.mdx&quot;,
      &quot;../src/**/*.stories.@(js|jsx|ts|tsx)&quot;
    ],
    &quot;addons&quot;: [
      &quot;@storybook/addon-links&quot;,
      &quot;@storybook/addon-essentials&quot;,
      &quot;@storybook/preset-scss&quot;
    ],
    webpackFinal: async (config, { 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
      config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../src'),
      });
  
      // Return the altered config
      return config;
    },
  }
  </code></pre>
  <p><code>webpack.config.js</code></p>
  <pre><code>const path = require('path')
  const merge = require('webpack-merge')
  const baseConfig = require('./webpack.base')
  
  const config = {
    output: {
      path: path.resolve(__dirname, 'lib'),
      filename: 'index.js',
      libraryTarget: 'commonjs2',
      library: 'violets'
    }
  }
  
  module.exports = merge(baseConfig, config)
  </code></pre>
  <p><code>webpack.base.js</code></p>
  <pre><code>const path = require('path')
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
  const TerserPlugin = require('terser-webpack-plugin')
  const autoprefixer = require('autoprefixer')
  
  module.exports = {
    mode: 'production',
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin(),
        new OptimizeCSSAssetsPlugin({})
      ],
    },
    entry: './src/index.js',
    module: {
      rules: [
        {
          test: /\.js$/,
          include: path.resolve(__dirname, 'src'),
          exclude: /node_modules/,
          loader: require.resolve('babel-loader'),
          options: {
            compact: true
          }
        },
        {
          test: /\.css$/,
          loaders: ['style-loader', 'css-loader'],
        },
        {
          test: /\.scss$/,
          sideEffects: true,
          use: [
            {
              loader: MiniCssExtractPlugin.loader
            },
            {
              loader: 'css-loader',
              options: { importLoaders: 1 }
            },
            {
              loader: require.resolve('sass-loader')
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  /*  eslint global-require: [&quot;off&quot;]  */
                  require('postcss-flexbugs-fixes'),
                  autoprefixer({
                    flexbox: 'no-2009'
                  })
                ]
              }
            }
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          loader: 'file-loader'
        },
      ]
    },
    externals: {
      react: 'react',
      'react-dom': 'react-dom'
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'violets.min.css'
      })
    ]
  }
  </code></pre>