Webpack 通过 css-loader 的 modules 配置实现 CSS Modules，要求文件命名为 xxx.module.css 并用 import styles from './xxx.module.css' 导入，类名自动哈希生成局部作用域，如 .button → Button_button__abc123，支持 localIdentName 自定义格式及 :global 显式声明全局样式。
Webpack 本身不直接处理 CSS Modules，而是靠 css-loader 的模块化配置来实现样式作用域隔离。核心逻辑是：把 .module.css 文件中的类名自动哈希化，生成唯一、局部的 class 名，让样式只对当前组件生效。
文件命名与导入方式
必须使用特定后缀才能启用模块化，否则 css-loader 会按普通 CSS 处理：
- 样式文件需命名为
xxx.module.css（如Button.module.css） - 在 JS 中通过
import styles from './Button.module.css'导入 - JSX 中用
className={styles.button}绑定，而非字符串"button"
webpack 配置关键项
需要在 module.rules 中为 .module.css 单独设置 loader，并开启 modules: { mode: 'local' }：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 匹配规则写成
/\.module\.css$/，避免误伤普通 CSS -
css-loader必须配置modules选项，例如：{ loader: 'css-loader', options: { modules: { mode: 'local' } } } - 通常搭配
style-loader（开发时注入<style></style>）或MiniCssExtractPlugin（生产环境抽离为 .css 文件）
局部作用域如何工作
Webpack 构建时，css-loader 会对每个类名做两件事：
- 将
.button转为类似Button_button__abc123的唯一标识 - 同时在 JS 模块中导出映射对象：
{ button: 'Button_button__abc123' } - 全局样式需显式声明：
:global(.reset) { margin: 0; }，这部分不会被哈希
进阶控制类名格式
可通过 modules.localIdentName 自定义哈希模板，提升可读性或适配团队规范：
- 常见配置：
localIdentName: '[name]_[local]__[hash:base64:5]' - 调试阶段可临时设为
[path][name]__[local]，保留原始名便于定位 - 支持
getLocalIdent函数，实现路径别名解析或 BEM 风格转换
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
