在Create React App/Craco中如何配置localIdentName修改类名格式？

你当前的配置存在问题——localIdentName是css-loader的专属配置项，并非sassOptions的内容，放在后者里不会生效。下面是正确的配置方式：

正确的craco.config.js配置 #

module.exports = {
  style: {
    css: {
      loaderOptions: {
        // 针对css-loader配置类名规则
        modules: {
          localIdentName: '[path][name]__[local]-test-[hash:base64:5]'
        }
      }
    },
    sass: {
      loaderOptions: {
        implementation: require('sass'),
        // 此处仅放置sass自身的配置，比如includePaths等，无需添加localIdentName
      }
    }
  }
}

关键注意点 #

• 样式文件必须以.module.scss为后缀（例如Card.module.scss），Create React App才会将其识别为CSS模块化文件，并应用你设置的类名规则。
• 全局样式（不需要模块化的）直接使用.scss后缀即可，不会受该配置影响。

配置完成后重启craco start，查看页面元素的类名，就能看到符合你定义的[path][name]__[local]-test-[hash:base64:5]格式的类名了。

内容的提问来源于stack exchange，提问作者Nikolay Kirichenko