如何在React、TypeScript及Parcel项目中调试CSS样式异常问题

• 确认当前项目使用的样式方案，带哈希后缀的.css-*类名通常来自CSS-in-JS库（如emotion、styled-components），先关闭生产环境的类名混淆：给Parcel构建命令加--no-minify参数，或配置对应CSS-in-JS库的生产环境类名生成规则，保留源码命名前缀，即可对应到规则所属的业务组件。
• 排查Parcel内置CSS优化逻辑：Parcel默认使用cssnano做生产环境CSS压缩，会自动合并重复规则、清理冗余属性，可在项目根目录新增.cssnanorc配置文件，临时关闭mergeRules、discardOverridden等优化项，重新打包后观察异常规则是否存在，确认是否为压缩工具自动生成的规则。
• 排查全局样式与第三方依赖污染：先临时注释所有第三方UI库的样式导入，重新打包后如果异常规则消失，再逐一导入排查是哪个库的样式被合并后引入了该规则；同时检查全局reset.css、normalize.css中是否有表单元素通用margin规则，确认生产环境下选择器优先级计算是否和开发环境存在差异。
• 排查条件样式逻辑：搜索代码中是否存在process.env.NODE_ENV === 'production'相关的环境变量判断，确认是否有为生产环境单独添加的样式规则；同时检查是否存在响应式断点规则，刚好在生产环境的测试分辨率下生效。
• 直接检索构建产物：将dist目录下所有CSS文件导入编辑器，搜索margin-bottom: 0px或类名哈希值，通过异常规则前后的其他CSS属性反推所属组件。
• 清理缓存重试：删除项目根目录下的.parcel-cache缓存目录与node_modules文件夹，重装依赖后重新打包，排除旧缓存样式被合并到新产物的可能。

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