故事书未在React应用程序中显示样式化的CSS

时间:2020-04-07 19:41:27

标签: reactjs webpack storybook css-loader

我安装了故事书,并在边栏中列出了所有*.stories.js文件。当我点击例如布局选项卡显示布局,但没有样式可见。而在正在使用的实际页面中,对布局进行样式设置。

Layout.js

import React from 'react';
import Grid from '@material-ui/core/Grid';
import layoutStyle from './Layout.css';

const Layout = () => {
  return (
    <Grid
      container={true}
      item={true}
      direction='row'
      justify='center'
      className={layoutStyle.main}>
      Layout for Cool app
    </Grid>
  );
};

export default Layout;

Layout.css

.main {
  background-color: #ccc;
}

Layout.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';

import Layout from './Layout';

storiesOf('Layout', module)
  .add('with primary', () => <Layout />)

webpack.config.dev.js (css加载器部分)

{
  test: /\.css$/,
  loader: 'style!css?importLoaders=1&modules=true&localIdentName="[name]__[local]__[hash:base64:5]"!postcss'
}

0 个答案:

没有答案