React.js--16为普通css样式通过modules参数启用模块化

1.在webpack.config.js文件中css-loader之后追加参数，通过？参数
'css-loader?modules’这里面的固定参数modules表示为普通的css样式表启用模块化

2.分别写两个css文件对应组件，CmtList.css和CmtItem.css
CmtList.css内的代码：

.title{
    color: red;
    text-align: center;
}
/*css模块化只针对类选择器和id选择器生效
不对将标签选择器模块化
*/

CmtItem.css内的代码：

.title{
    font-size: 20px;

}
content{
    font-size: 13px;
}
.cmtbox{
    border:1px black;
    margin:  10px;
    padding: 10px;
    box-shadow:  0 0 10px black;

}

3.在CmtList2.jsx和CmtItem2.jsx文件中导入各自对应的css样式文件并且使用
CmtList2.jsx文件中的代码：

import React from 'react'

//导入列表组件需要的样式表,直接导入的css样式表默认的是在全局整个项目都生效
//怎么解决样式表冲突的问题，可以为
import cssobj from '@/css/CmtList.css'
console.log(cssobj);



//导入评论项的子组件
import CmtItem from '@/Components/CmtItem2'
//创建一个父组件
export default class CmtList extends React.Component{
    constructor(){
        super();
        this.state = {
            CommentList:[//评论列表数据
                {id:1,user:'安琪拉',conent:'魔法为我而存在'},
                {id:2,user:'后羿',conent:'发光的一个就够了'},
                {id:3,user:'刘禅',conent:'一号机开启暴走状态'},
                {id:4,user:'鲁班',conent:'有时候肌肉比头脑更厉害'},
                {id:5,user:'吕布',conent:'我的貂蝉在哪里'}
            ]
        }
    }

render(){
    return

        
        
这是评论列表组件
        
       {this.state.CommentList.map(item =>)}
       
    
    
}
}

CmtItem2.jsx中的代码：

import React from 'react'

import cssobj from '@/css/CmtItem.css'
//使用function构造函数，定义普通的无状态组件
export default function CmtItem(props) {
    return 

        
评论人:{props.user}
        
评论内容:{props.conent}
    
}

4.从新运行npm run dev
结果为：