Repository: storybook
Issue: Css modules don't apply on stories after migrate storybook 4 to 5
Labels: question / support,configuration babel / webpack

**Describe the bug**
I have a components library that working well in storybook 4.0.0, I migrated to 5.3.1 my components have their own css files, and what is happening is these styles are not applied to it on the story.

**To Reproduce**
I migrate to version 5 in storybook, I updated webpack config, and actually I can see loaders set, but styles don't apply

**Code snippets**

**webpack.config.js** 

```
module.exports = ({ config, mode }) => {
  const removeLoader = query => {
    const rId = config.module.rules.findIndex(r =>
      r.test.toString().includes(query)
    );
    config.module.rules.splice(rId, 1);
  };
  removeLoader('jpeg|png');
  removeLoader('css');

  config.module.rules.push( {
    test: /\.jsx?$/,
    exclude: /(node_modules|bower_components|public\/)/,
    loader: "babel-loader"
  },
  {
    test: /\.css$/,
    loaders: [
      'style-loader?singleton&insertInto=body',
      'css-loader?modules&importLoaders=1&localIdentName=[name]_[local]___[hash:base64:6]',
      {
        loader: 'postcss-loader'
      }
    ],
    exclude: /node_modules/
  },
  {
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader?modules&importLoaders=1&localIdentName=[name]_[local]___[hash:base64:6]',
      'sass-loader'],
    exclude: /node_modules/
  },
  {
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
    exclude: /(node_modules|bower_components)/,
    loader: "file-loader"
  },
  {
    test: /\.(woff|woff2)$/,
    exclude: /(node_modules|bower_components)/,
    loader: "url-loader?prefix=font/&limit=5000"
  },
  {
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    exclude: /(node_modules|bower_components)/,
    loader: "url-loader?limit=10000&mimetype=application/octet-stream"
  },
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    exclude: /(node_modules|bower_components)/,
    loader: "url-loader?limit=10000&mimetype=image/svg+xml"
  },
  {
    test: /\.gif/,
    exclude: /(node_modules|bower_components)/,
    loader: "url-loader?limit=10000&mimetype=image/gif"
  },
  {
    test: /\.jpg/,
    exclude: /(node_modules|bower_components)/,
    loader: "url-loader?limit=10000&mimetype=image/jpg"
  },
  {
    test: /\.png/,
    exclude: /(node_modules|bower_components)/,
    loader: "url-loader?limit=10000&mimetype=image/png"
  },
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    loader: "eslint-loader",
    options: {}
  },));

  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.IS_STORYBOOK_BUILD': JSON.stringify(
        process.env.IS_STORYBOOK_BUILD
      ),
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  );
  config.externals = {
    jsdom: 'window',
    cheerio: 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': 'window',
    'react/addons': true
};
return config;
}
```


**Example component**

```

import React from 'react'
import ButtonBase from '@material-ui/core/ButtonBase'
import TYIcon from 'components/TYUI/Common/TYIcon'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import './TYButton.css'

const getClasses = ({ accent, size }) => classnames({
  normal: accent === 'normal',
  positive: accent === 'positive',
  primary: accent === 'primary',
  negative: accent === 'negative',

  regular: size === 'regular',
  small: size === 'small',
  large: size === 'large',
})

const TYButton = ({ accent, size, className, icon, ...props }) =>
  <ButtonBase {...props} className={className} styleName={getClasses({ accent, size })}>{icon && <TYIcon icon={icon} styleName='icon' />}{props.children}</ButtonBase>

TYButton.propTypes = {
  accent: PropTypes.string,
  icon: PropTypes.string,
  size: PropTypes.string,
  className: PropTypes.string,
}

TYButton.defaultProps = {
  accent: 'normal',
  size: 'regular',
}

export default TYButton

```

**css stylesheet**

```

@value green, greenHover, greenDisabled, blue, blueHover, blueDisabled, red, redHover, redDisabled, gray, lightGray from '../colors.css';

.base {
	transition: all 0.08s ease-in;
    border-radius: 4px;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}w
.base + .base {
	margin-left: 10px;
}
.base[disabled] {
    cursor: default;
    pointer-events: none;
}

.normal {
	composes: base;
	background: #fafafa;
    color: gray;
    border-color: lightGray;
}
.normal:hover {
	background: whitesmoke;
}
.normal[disabled] {
    border-color: lightGray;
    background: #f9f9f9;
    color: #bbb;
}

.positive {
	composes: base;
    background: green;
    color: white;
	border-color: green;
}
.positive:hover {
    background: greenHover;
}
.positive[disabled] {
    border-color: greenDisabled;
    background: greenDisabled;
    color: #e1efd2;
}

.primary {
    composes: base;
    background: blue;
    color: white;
    border-color: blue;
}
.primary:hover {
    background: blueHover;
}
.primary[disabled] {
    border-color: blueDisabled;
    background: blueDisabled;
    color: #e1f0fa;
}

.negative {
    composes: base;
    background: red;
    color: white;
    border-color: red;
}
.negative:hover {
    background: redHover;
}
.negative[disabled] {
    border-color: redDisabled;
    background: redDisabled;
    color: white;
}

.regular {
    padding: 6px 15px;
    font-size: 13px;
}

.small {
    padding: 5px 10px;
    font-size: 11px;
}

.large {
    padding: 10px 25px;
    font-size: 15px;
}

.icon {
    margin-right: 5px;
    vertical-align: middle;
}

```

**Story**


```
import React from 'react'
import { storiesOf } from '@storybook/react'
import TYButton from '../../../src/components/TYUI/Button/TYButton'


storiesOf('TYUI/Button/TYButton', module)
  .add('Regular', () => <TYButton>Regular</TYButton>)
  .add('Positive', () => <TYButton size="large" accent='positive'>Positive</TYButton>)

```

**Config.js**

```

import React, { createElement } from 'react'
import { configure, addDecorator, addParameters } from '@storybook/react'
import { MuiThemeProvider } from '@material-ui/core/styles'
import requireContext from 'require-context.macro';
import { configure as configureEnzyme } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import theme from '../src/components/theme'
import '../styles/ty-iconic.scss'
import '../styles/index.scss'


addParameters({
  options: {
    panelPosition: 'bottom',
    theme: storybooktheme
  }
});

export const SBDecorator = story => (
  <IntlProvider {...intlProps}>
    <MuiThemeProvider theme={theme}>
      {story()}
    </MuiThemeProvider>
  </IntlProvider>
)

addDecorator(story => SBDecorator(story));
addDecorator(createElement);

  const req = requireContext('./stories', true, /\.js$/);
  const loadStories = () => {
    req.keys().forEach(req);
  };
  configure(loadStories, module);

```


I do not know if there is something wrong with my webpack configuration, but it seems to be ok, I would appreciate any help.