如何通过自定义generateScopedName格式优化CSS Modules中类名冗余问题？

本文共计748个文字，预计阅读时间需要3分钟。

默认生成的类名像这样：

用 generateScopedName 控制输出长度和结构

这个配置项是 postcss-modules 和 css-loader 共享的核心开关，它决定最终类名怎么拼——不是靠删空格或压缩，而是从源头截断无意义的冗余。

• localIdentName（css-loader）和 generateScopedName（postcss-modules）本质等价，选一个配即可，别重复写
• 推荐格式：[name]_[local]_[hash:base64:5] —— [name] 保模块上下文，[local] 保语义，[hash:base64:5] 足够防冲突（大型项目也极少碰撞），比默认的 :8 缩短近 40% 字符数
• 避免用 [path] 或嵌套多层 [folder]，路径越深类名越不可控，且构建缓存失效更频繁
• 如果项目已稳定、模块数量可控，甚至可用 [local]_[hash:base64:4]，但上线前务必跑一次哈希碰撞检测脚本（简单遍历所有 .module.css 文件 + 类名组合即可）

别忽略 localsConvention 对 JS 层的影响

类名缩短后，JS 里引用的键名也要跟得上。