react 项目 使用css modules模块化

1.vue项目的组件中有一个scoped属性，可以把style代码私有化，只在当前组件生效，react怎么做呢？

react项目需要在webpack里面配置，首先运行npm run eject可以将webpack.config.js文件从nodemodules中暴露出来

2.很多博客是这么写的

{
    loader: 'css-loader',
    options: {
        modules: true, // 开启模块化
        localIdentName: '[local]__[name]--[hash:base64:5]'//重命名规则
    }
}

但是我的config文件是这样的

{
  test: cssRegex,   // 正则表达式/\.css$/
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
  }),  
  sideEffects: true,
}

getStyleLoaders是一个方法，第一个参数是一个对象，也就是第一张图片里面的options

所以我写成了

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    modules:true,
    localIdentName: '[name]__[local]--[hash:base64:5]',
    sourceMap: isEnvProduction && shouldUseSourceMap,
  }),  
  sideEffects: true,
}

3.报错了：options has an unknown property 'localIdentName'

不认识localIdentName这个参数

4.最后终于在css-loader的npm 官网找到了解决办法https://www.npmjs.com/package/css-loader#object

最后结果

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    modules: {
      mode:'local',
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
    sourceMap: isEnvProduction && shouldUseSourceMap,
  }),
  sideEffects: true,
},

5.优化：上面是把所有的.css文件都私有化了，但这并不是我们想要的，我们发现webpack.config.js里面默认有这么一段

{
  test: cssModuleRegex,   //正则表达式 /\.module\.css$/
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    modules: {
      getLocalIdent: getCSSModuleLocalIdent,
    },
  }),
}

也就是说让css-loader对.modules.css的代码进行模块化，而且我们发现这里根本不需要配置，

我们回到题目发现，react的项目只需要把.css文件换成.module.css就可以实现模块化