我安装了故事书,并在边栏中列出了所有*.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'
}