React项目build版本CSS样式与开发版本显示不一致问题求助

排查和解决步骤 #

• 优先核对类名匹配关系
  打开生产环境的开发者工具，选中样式失效的DOM元素，复制其class属性值，再去打包产物的CSS文件中搜索该类名：
  • 如果搜索不到对应样式规则：属于CSS Modules的类名生成逻辑不匹配问题，检查webpack中css-loader的modules配置，确保JS侧和CSS侧的localIdentName规则完全一致，不要出现开发环境用带文件名的规则、生产环境仅用短hash的配置，避免hash碰撞或映射错误。如果使用craco、customize-cra等工具修改CRA默认配置，重点核对CSS相关的配置项。
  • 如果可以搜索到对应规则：检查是否有更高优先级的全局样式覆盖，或者PostCSS插件错误修改了选择器规则。
• 避免类名重名冲突
  将失效的CSS类名改为唯一命名，比如把.popup改为.delete-popup-wrapper、.footerContainer改为.footer-root-container，避免不同CSS Module文件下的同名类在打包压缩时被错误合并覆盖。
• 检查样式清除工具配置
  如果项目配置了purgecss等自动清理无用样式的工具，确认扫描规则包含了所有JSX/TSX文件路径，避免样式规则被误删（你提到CSS文件中存在对应规则可跳过此步）。
• 确认CSS文件后缀合规
  检查所有使用CSS Modules的样式文件后缀是否为.module.css，避免被工具识别为全局样式处理。

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