2019/11/19
完整配置
webpack.config.js的配置
{test:/\.css$/,exclude:/node_modules/,
use:[
{loader:'style-loader'},
{
loader:"css-loader",
options:{
modules:{localIdentName:'[name]_[local]-[hash:5]'},
importLoaders:1,
}
}
]
}
css文件
.box {
border: 1px solid #254341;
margin: 10px 0;
paddingLeft: 15;
}
/*注意:当启用CSS模块化之后,这里面的所有的类名都变成了私有的,要想将类名设成全局的
可以把这个类名,用:global()给包裹起来。*/
:global(.title){
font-weight: 200;
color: blueviolet;
text-align: center;
}
.title{
fontSize:16;
color:purple;
}
.body{
fontSize:14;
color:red;
}
调用
import itemStyles from '../../css/ctmItem.css'
export default function CommentItem(props) {
return <div className={itemStyles.box}>
<h1 className={itemStyles.title}>评论人:{props.user}</h1>
<h2 className={itemStyles.body}>评论内容:{props.content}</h2>
</div>
}
css模块化时我的坑:没有引入style-loader,导致itemStyles 成为了数组。如果你遇见了和我一样的错误,我的另一篇文章 css模块化后,报错,输出 itemStyles,发现其的不是对象,而是数组,就是解决的这个问题。