webpack中localidentname应配置为"[name]__[local]___[hash:base64:5]"以保留原始类名，其中[name]为css文件名，[local]为原始类名；vite需用generatescopedname函数模拟该逻辑；rollup需通过getlocalident函数实现对齐。
Webpack 中 LocalIdentName 怎么配才能保留原始类名
Webpack 默认的 localIdentName（比如 [hash:base64]）会完全丢弃原始类名，调试时根本看不出对应关系。要保留可读性，必须显式包含 [name] 和 [local]：
-
[name]是 CSS 文件 basename（不含扩展名），比如button.css→button -
[local]是原始类名，比如.primary→primary - 推荐配置：
localIdentName: "[name]__[local]___[hash:base64:5]"，生成如button__primary___aBcDe - 注意：Webpack 5+ 需在
css-loader的modules选项里配，不是options顶层；V4 则在options.modules.localIdentName
Vite 下 CssModules 的类名生成逻辑和等效配置
Vite 默认用 postcss-modules，不认 Webpack 的 localIdentName。它靠 generateScopedName 函数控制命名，需在 vite.config.ts 的 css.modules 中传入：
- 直接写字符串不生效，必须是函数：
generateScopedName: (name, filename) => `${filename.replace(/.*\/([^/]+)\.module\.css$/, '$1')}__${name}___${Math.random().toString(36).substr(2, 5)}` - 更稳妥的做法是用
css-modules-loader-core提供的默认生成器并 patch：import { generateScopedName } from 'css-modules-loader-core'; ... generateScopedName: (name, filename) => generateScopedName(name, filename, '[name]__[local]___[hash:base64:5]') - Vite 4.3+ 支持
css.modules.localsConvention: 'dashes'，但仅影响驼峰转短横线，不改变基础命名结构
Rollup + postcss-modules 插件怎么对齐 Webpack 行为
Rollup 本身不处理 CSS 模块，依赖 rollup-plugin-postcss 或 @rollup/plugin-postcss，而它们底层调用 postcss-modules，所以关键在传参给这个库：
- 必须显式启用
modules: true，且传入getLocalIdent函数（不能只靠字符串模板） - 示例：
modules: { getLocalIdent: (context, localIdentName, localName, options) => { const fileName = path.basename(context.resourcePath, '.module.css'); return `${fileName}__${localName}___${crypto.createHash('sha256').update(localName).digest('base64').slice(0, 5)}`; } } - 注意：
context.resourcePath在某些 Rollup 版本中可能为空，建议 fallback 到context.file或提前 resolve - 不配
getLocalIdent就走 postcss-modules 默认哈希，类名彻底不可读
类名太长影响 DevTools 调试？别盲目砍 hash 长度
很多人把 [hash:base64:2] 当成“缩短类名”的捷径，结果引发样式冲突——不同类名哈希碰撞概率陡增：
- Base64 2 位只有 4096 种组合，一个中型项目轻松超限；
[hash:base64:5]已达 10 亿级，实际足够安全 - 真正影响调试体验的是前缀冗余，不是 hash 长度。优先精简文件名部分：比如统一用
[folder]替代[name]，或约定模块 CSS 必须以.module.css结尾再截取 - Chrome DevTools 支持 CSS 类名过滤，输入
button__就能聚焦相关样式，比缩短 hash 更有效
LocalIdentName 的核心不是“怎么缩”，而是“怎么让每个片段都携带明确语义”。不同构建工具只是入口不同，底层都依赖 postcss-modules 的 ident 生成逻辑。漏掉 [local] 或写错上下文路径，比 hash 长度问题更容易导致线上样式错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
