React项目部署后.number样式类被覆盖的原因、排查及解决方法

• 第三方依赖携带样式：项目引入的某个npm依赖内部自带other.sass文件，生产构建时该依赖的样式被合并到最终产物中。开发模式下你的样式加载顺序晚于依赖样式、优先级更高，生产构建调整了样式合并顺序后，依赖的.number类优先级更高完成覆盖。
• 构建配置差异：生产构建开启了CSS合并、压缩、顺序优化等规则，和npm start的开发模式样式处理逻辑不一致，导致同名类优先级变化。
• 部署平台注入样式：部分静态托管平台/CDN会自动注入公共样式、统计脚本附带样式，这类样式不属于本地代码库，仅在线上环境生效。

• 先验证构建环节问题：本地执行生产构建命令npm run build，用静态服务（比如全局安装serve后执行serve build）打开构建产物，观察样式是否异常。如果本地构建产物就有问题，说明问题出在构建环节；如果本地构建产物正常，说明是部署平台注入了额外样式。
• 检索依赖样式：在项目根目录下全局搜索node_modules中的other.sass文件，以及.number类定义，定位到对应的第三方依赖包。
• 核对构建配置：检查webpack/Vite等构建工具的CSS处理规则，确认样式加载顺序、是否开启了异常的样式合并/去重插件。

• 提升自定义样式优先级：给你的.number选择器增加父级限定（比如你的编辑器外层容器类为.code-editor，就修改为.code-editor .number），权重提升后即可覆盖低优先级的同名类；应急场景也可在样式属性后加!important临时修复。
• 避免类名冲突：开启CSS Modules，将你的业务样式文件后缀改为.module.css，构建时会自动给类名加哈希后缀，从根源上避免全局类名冲突。
• 处理异常依赖样式：如果定位到是第三方依赖带来的冲突样式，可以调整依赖引入规则，仅引入依赖的JS逻辑、不引入其全局样式，或者在构建配置中排除对应other.sass的打包。
• 关闭部署平台注入：如果是部署平台自动注入的样式，前往托管平台的设置页关闭静态资源优化、自动注入资源类的开关即可。

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