Reactjs 故事书5没有'；不要在故事中显示css样式

我有一个组件库，它在storybook 4.0.0中运行良好，我迁移到了5.3.1，我的组件有自己的css文件，现在发生的是这些样式没有应用到故事中

我已经按照故事书的建议更新了文件和网页包配置，我可以看到加载程序的应用，在控制台或故事书构建中没有错误

我的网页配置

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

故事

从“React”导入React
从'@storybook/react'导入{storiesOf}
从“../../src/components/TYUI/Button/TYButton”导入TYButton
storiesOf（'TYUI/Button/TYButton'，模块）
.add（'常规'，（）=>常规）
.add（'正'，（）=>正）

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

从“React”导入React，{createElement}
从“@storybook/react”导入{configure，addDecorator，addParameters}
从“@material ui/core/styles”导入{MuiThemeProvider}”
从“require context.macro”导入requireContext文本；
从“酶”导入{configure as configureEnzyme}
从'enzyme-Adapter-react-16'导入适配器
从“../src/components/theme”导入主题
导入“../styles/ty IGNORIC.scss”
导入“../styles/index.scss”
添加参数({
选项：{
面板位置：“底部”，
主题：故事书主题
}
});
export const SBDecorator=story=>(
{story（）}
)
addDecorator（story=>SBDecorator（story））；
addDecorator（createElement）；
const req=requireContext（'./stories'，true，/\.js$/）；
const loadStories=（）=>{
req.keys（）.forEach（req）；
};
配置（加载故事、模块）；

我们最近刚从storybook v4升级到v5（现在是v6），config.js是我相信现在的preview.js。v4和v5之间发生了一些非常重要的变化，我和团队中的另一位开发人员花了大约一周的时间才解决了所有问题。我能提供的唯一其他建议是，确保您尽可能遵循文档，对设置/配置进行所有小的更改。此外，由于更新工具不适用于我们，我最终只是从头开始重新实例化了storybook。我们正在慢慢地将旧故事移植到新组件故事格式（CSF）。您好，谢谢@DrewReese。我认为preview.js文件适用于storybook 6，我也尝试过以防万一，但我有同样的问题。我遵循了文档，也许开始一个新项目并迁移故事是最好的选择。我在周末刚把我们推到了v6，但在此之前我们在v5上呆了大约一个半月，有一个

preview.js

，这是可行的，但正如我提到的，这一切都是在我们基本上从零开始并开始一个新的故事书install/setup/config之后发生的，因为迁移方法不适合我们。祝你好运

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