localidentname必须嵌套在modules对象内，不能与modules平级；正确写法为options.modules.localidentname，否则webpack 5+中静默失效。
localIdentName 必须嵌套在 modules 对象里，不能平级写
Webpack 5+ 的 css-loader 要求 localIdentName 必须作为 modules 的子属性，否则会静默失效或报错。常见错误是把 localIdentName 和 modules: true 并列写在 options 下——这在 v4 以前可能凑合能用，现在直接不生效。
正确结构只有一种：
use: [{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
}]
-
modules: true单独写 ≠ 启用模块化高级配置；它只是开关，localIdentName等定制项必须收进modules: { ... }对象里 - Vue 项目用
vue-loader时也一样：哪怕<style module></style>写了，如果css-loader的modules没配成对象形式，照样不走 CSS Modules 流程 - 旧配置里用
css-loader?modules&localIdentName=...查询字符串写法已彻底废弃，Webpack 5 不再支持
调试优先的命名格式：保留 [path] 和 [local]，别只用 [hash]
线上用纯哈希如 [hash:base64] 看似“防冲突”，但断掉了开发溯源能力——你看到 abc123def456 这个类名，根本没法反查是 Button.css 还是 Modal.css 里的 title。BEM 场景下尤其致命。
推荐开发/测试环境用这个格式：
localIdentName: '[path][name]__[local]--[hash:base64:5]'
-
[path]显示相对路径（如components/Button/），一眼定位文件夹 -
[name]是文件名（Button），配合[local]（如text）形成可读标识Button__text -
[hash:base64:5]仅作微小扰动，避免同名类冲突，又不至于完全不可读 - 生产环境可换为
[name]__[local]--[hash:base64:8]去掉[path]减少体积，但别砍掉[name]__[local]这部分
注意哪些选择器不会被 localIdentName 影响
localIdentName 只作用于 CSS Modules 启用后被识别为“局部作用域”的选择器。不是所有 CSS 都会被重命名。
- 只对顶层类名和 ID 生效：比如
.button→Button__button--abc123，#header同理 - 标签选择器、后代选择器、伪类等**完全跳过**：例如
button、.container h2、.item:hover这些不会重命名，也不受模块化隔离 - 全局注入需显式用
:global(...)包裹，比如:global(.reset) { margin: 0; }，这部分也不会走localIdentName规则
camelCase 导出和 BEM 兼容性要手动协调
如果你开了 exportLocalsConvention: 'camelCase'（常见于 TypeScript + React），生成的 JS 对象键名会变成 buttonText，但实际插入 DOM 的类名仍是 Button__text--abc123。这两者不一致，容易误以为样式没挂上。
- 别指望
import styles from './Button.module.css'后用styles.button_text—— 它不存在，得用styles.buttonText - BEM 类名含双下划线（
__）或中划线（--）时，camelCase会自动转换：button__text→buttonText，modal--large→modalLarge - 若坚持用原始类名（比如服务端渲染需要精确匹配），就关掉
exportLocalsConvention，改用exportOnlyLocals: true+ 手动Object.keys(styles)处理
localIdentName，而是改完配置后类名没变——先检查 modules 是不是对象结构，再确认文件是否以 .module.css 结尾（或 test 正则是否覆盖到），最后看控制台元素上渲染出的类名，是不是还带着 Button__text 这样的痕迹。没有，那一定是配置没进到 css-loader 的 modules 分支里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
