一切似乎都很好,没有错误,但页面上的元素仍然没有样式。
webpack.config.js
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
},
plugins: [
new ExtractTextPlugin('app.css', {
allChunks: true
}),
],
Layout.js
import React, { Component } from 'react';
import InteractiveMap from './InteractiveMap';
import Header from './header';
import Navigation from './navigation';
import CSSModules from 'react-css-modules';
import styles from './Layout.css';
class Layout extends Component {
render() {
return (
<div>
<div className={styles.mapContainer}>
<InteractiveMap />
</div>
<div>
<Header className={styles.header}>
<Navigation menuItems={menuItems}/>
</Header>
</div>
</div>
);
}
}
export default CSSModules(Layout, styles);
Layout.css
//testing
.mapContainer: {
padding: 0;
background-color: black;
height: 100%;
color: yellow;
}
.header {
color: yellow;
background-color: blue;
}
编译的 app.css
.Layout__mapContainer___3yH5h: {
padding: 0;
background-color: black;
height: 100%;
color: yellow;
}
.Layout__header___2kJ4F {
color: yellow;
background-color: blue;
}
正如您在图片中所见,类已生成并应用于元素,但页面上没有显示任何内容。 image
最佳答案
在 react-css-modules 中你使用 styleName而不是类名:
<div styleName="container">
这应该有效:
class Layout extends Component {
render() {
return (
<div>
<div styleName="mapContainer">
<InteractiveMap />
</div>
<div>
<Header styleName="header">
<Navigation menuItems={menuItems}/>
</Header>
</div>
</div>
);
}
}
关于css - 样式不适用于使用 react-css-modules,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39524284/