React18自定义css modules生成类名规则

安装eject

以便webpack自定义
npm run eject

修改webpack.config.js

找到搜索cssModuleRegex找到modules中的mode为local，这里就是css modules的处理。

    {
      test: cssModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: {
          mode: 'local',
          localIdentName: '[hash:base64:12]'
          // getLocalIdent: getCSSModuleLocalIdent,
        },
      }),
    },

这里将 getLocalIdent 注释以便自定义生效， getCSSModuleLocalIdent为默认的处理方式，用于对生成类名的处理。

使用craco

配置style

style: {
    modules: {
        localIdentName: 'ke-[hash:base64:32]'
    }
}