故事书5没有在故事中显示CSS样式

Question

我有一个组件库，可以在故事书4.0.0中正常工作，我已迁移到5.3.1，我的组件具有自己的css文件，并且发生的情况是这些样式未应用于故事中。

我已经按照故事书的建议更新了文件和webpack的配置，并且我看到加载程序适用，控制台或故事书的构建没有错误。

我的webpack配置

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;
}

组件

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

样式表已应用于该组件

@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;
}
.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;
}

故事

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);