启用CSS模块触发css-loader参数错误，请求解决指引

这个报错的核心原因是CSS Loader的API版本更新了——从v3版本开始，所有和CSS模块相关的配置项（比如localIdentName）不再是顶层选项，必须嵌套在modules对象里。你原来的配置把modules: true和localIdentName平级放置，这不符合新的API规范，所以才会抛出ValidationError。

修改后的正确配置 #

把localIdentName移到modules对象内部，同时modules的值从布尔值true改成一个配置对象：

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

额外说明：自定义命名规则（可选） #

如果你需要更灵活的类名生成逻辑，可以用getLocalIdent函数替代localIdentName，比如：

modules: {
  getLocalIdent: (context, localIdentName, localName, options) => {
    // 自定义生成规则，比如只保留文件名和本地类名
    return `${context.resourcePath.match(/([^/]+)\.css$/)[1]}__${localName}`;
  }
}

这样修改后，CSS Loader就能正确识别你的模块配置，编译应该就能正常通过了。

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