react css样式作用域的问题

1、下载css，style依赖

cnpm i style-loader css-loader -D

在 webpack.config.js 中配置

  module: {
   
        // 第三方匹配规则
        rules: [
            {
   test: /\.css&/, use: ['style-loader', 'css-loader']}
        ]
    },

在页面中引入，发现当时的css样式是应用于全局的。
在父组件中导入css样式，在子组件中也可以使用。
react中的css样式是没有作用域的

import CmtList from '../css/CmtList.css';

<h1 className='title'>这是评论列表</h1>

那么如何是css样式是有作用域的呢？

2、为css样式添加作用域

像添加路由文件一样，在声明运用依赖的同时加上参数
该参数的作用是时css模块化
添加后项目则不生效了

    module: {
   
        // 第三方匹配规则
        rules: [
            {
   test: /\.css$/, use: ['style-loader', 'css-loader?modules']}
        ]
    }