首先在webpack.config.js的打包处理样式表设置中增加这样modules参数:
{test: /\.css$/, use: ['style-loader', 'css-loader?modules']}
表示为普通的CSS样式表,启用模块化;
然后建立指定的css文件,在导入该样式表时就可以接受一个对象,通过引用该对象的类来达到样式的效果:
cmtitem.css
.title{
font-size: 14px;
}
.content{
font-size: 12px;
}
.cmtbox{
border: 1px dashed #ccc;
margin: 10px;
padding: 10px;
box-shadow: 0 0 10px #ccc;
}
导入:
import cssobj from '@/css/cmtitem.css'
引用:
<h1 className = {cssobj.title}>评论人: {props.user}</h1>
<p className={cssobj.content}>评论内容:{props.content}</p>