react 中开启css-modules

css-modules开启作用

css拥有局部作用域,放在css污染

webpack中改造

{
     loader:'css-loader',
        options: {
            modules: {
               localIdentName: "[path][name]__[local]",
            },
       }
}

代码中修改 index.jsx

// 引入方式修改
// import './index.scss';
import style from './index.scss';

// 使用方式
classNmae={style.XXX}

css/scss 中局部不编译 global

 // 添加局部
     :global(.focused){ // 样式名称
        background-color: pink; // 样式内容
    }