Webpack css-loader的localIdentName配置无效问题求助

你遇到的问题核心是配置选项拼写错误！你的css-loader配置里写的是localIndentName，但正确的选项名是localIdentName——注意是Ident（识别符）而不是Indent（缩进），这个拼写错误导致css-loader忽略了你自定义的类名规则，直接使用了默认的纯哈希命名方案。

修正后的Webpack配置 #

把配置里的localIndentName改成localIdentName即可：

{
  test: /(\.css|\.scss|\.sass)$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        module: true,
        localIdentName: '[name]_[local]_[hash:base64:5]' // 这里修正了拼写错误
      }
    }
  ]
}

补充说明 #

结合你使用的版本（css-loader 0.28.11、webpack 4.8.3），这个配置是完全适配的：

• module: true在css-loader 0.28.x版本中是开启CSS Modules的正确方式（更高版本可能改用modules: true，但你的版本无需调整）
• 修正后，编译后的类名会按照你指定的[name]_[local]_[hash:base64:5]格式生成，比如App_root_3FKNg这类包含原类名、文件名的命名，而不是纯哈希值。

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