关于CSS模块化

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,发现其的不是对象，而是数组，就是解决的这个问题。