React项目中CSS Module突然失效导致样式无法应用，该如何解决？

前置说明 #

你提到的RCA应为create-react-app（CRA）笔误，以下方案基于CRA默认CSS Module规则给出，适配绝大多数同类场景。

排查步骤 #

• 核对CSS Module文件命名：CRA要求CSS Module文件必须以.module.css（或对应预处理器后缀.module.scss/.module.less）为后缀，若近期修改过文件名丢失了.module标识，会直接导致样式隔离失效、类名不匹配。
• 核对样式引入与使用语法：正确用法为import styles from './xxx.module.css'，标签上绑定className={styles.对应类名}，如果引入时没有用styles对象接收、直接写了字符串类名，或者类名大小写不匹配（比如CSS文件中是contentWrapper，组件内写了styles.contentwrapper），都会导致样式不生效。
• 校验构建产物类名匹配度：打开浏览器开发者工具元素面板，查看目标div的实际class属性是否带哈希后缀（格式为类名_随机哈希），再查看样式面板中对应CSS规则的选择器是否和该哈希值完全一致：
  • 若哈希值不一致，基本可判定为本地构建缓存问题
  • 若没有哈希后缀，说明CSS Module未生效，需核对样式处理相关配置
• 检查样式优先级冲突：确认是否有全局样式、其他组件样式通过更高优先级（比如选择器层级更高、加了!important）覆盖了当前样式，可在开发者工具样式面板查看是否有目标样式被划掉的提示。
• 优先核对近期代码变更：如果之前运行正常，可对比最近一次可正常运行的代码版本，重点查看是否修改过CRA配置、css-loader配置、样式相关依赖版本。

常见解决方法 #

• 确认是优先级问题的话，可调整当前样式的选择器优先级，临时验证可加!important，确认问题后再优化为合理的优先级规则，不要在线上环境保留!important。
• 清理构建缓存：执行rm -rf node_modules/.cache（Windows系统手动删除node_modules\.cache目录）后重启开发服务即可解决绝大多数缓存导致的类名不匹配问题。
• 如果已执行CRA eject操作修改过构建配置，检查webpack.config.js中css-loader的modules配置项是否为开启状态。

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