YA Webvisor无法识别生产环境React项目CSS样式问题求助

• CSS Modules类名哈希不匹配
  生产环境下，webpack会为CSS Modules生成带哈希的类名（比如Header__wrapper--xY7z9），而本地开发模式通常使用更简洁的类名（甚至是原类名）。YA-webvisor的录制机制可能在抓取DOM时记录的是未哈希的类名，或者无法正确关联哈希后的类名与对应样式，导致录制回放时样式无法匹配。可以尝试临时修改webpack配置（通过eject或craco），关闭生产环境下CSS Modules的类名哈希，验证是否能解决问题。

• CSS压缩/混淆导致解析异常
  生产环境中create-react-app会自动压缩CSS，包括合并重复选择器、简写属性、移除注释等操作。部分录屏工具对压缩后的CSS解析存在兼容性问题，无法正确识别简化后的样式规则。可以临时禁用生产环境的CSS压缩（修改webpack的css-minimizer配置），测试录屏是否正常显示样式。

• 样式加载时机与录屏快照不同步
  生产环境的CSS通常打包为单独文件并通过<link>标签加载，可能存在加载延迟；而本地开发模式的样式是即时注入的。YA-webvisor可能在样式完全加载前就完成了DOM快照，导致录制内容缺少样式。可以尝试将生产环境的CSS内联到HTML中（通过style-loader替代mini-css-extract-plugin），验证是否能同步加载样式与快照。

• CSS Modules作用域机制的兼容性问题
  CSS Modules通过生成唯一的类名实现样式隔离，部分录屏工具可能无法解析这种带作用域的样式规则（比如带有data-*属性的选择器）。可以尝试将部分关键样式改为全局样式（去掉.module.scss后缀），测试录屏时全局样式是否能正常显示，以此排查是否是作用域机制导致的问题。

• 异步代码分割导致样式延迟加载
  生产环境create-react-app默认开启代码分割，组件对应的CSS会随组件异步加载。如果YA-webvisor录制的是初始页面加载的快照，异步加载的样式可能还未生效，导致录制内容缺失样式。可以临时关闭代码分割（修改webpack的splitChunks配置），验证是否能解决样式不显示的问题。

内容的提问来源于stack exchange，提问作者R. Rustan