React项目执行yarn build后CSS样式与开发环境不一致如何解决

常见原因与修复方法 #

• 选择器冲突、CSS引入顺序差异
  开发环境下CSS随组件渲染动态注入，加载顺序和组件渲染顺序对齐；生产打包时会把所有CSS合并为单个文件，完全按照代码里import的先后顺序排列。如果多个组件存在同名全局类名，或者全局样式、组件样式的引入顺序不合理，合并后的优先级覆盖结果会和开发环境完全不同，最终导致样式偏差。
  解决方式：优先使用CSS Modules隔离样式作用域，把CSS文件重命名为[name].module.css，组件中以对象形式引入调用类名，从根源避免全局类名冲突；调整import顺序，保证全局重置样式、公共样式优先于业务组件样式引入。
• CSS内静态资源路径错误
  若CSS中使用了背景图、自定义字体等外部资源，且资源存放在public目录下，直接写相对路径在打包后会因为产物目录结构变化无法匹配到资源，对应样式直接失效。
  解决方式：引用public目录下的资源时添加%PUBLIC_URL%前缀，示例写法：background-image: url(%PUBLIC_URL%/static/bg.png)；也可以把静态资源移入src目录，直接用相对路径引用，create-react-app打包时会自动完成路径转换。
• CSS压缩规则异常
  生产打包默认开启的CSS压缩工具可能会错误合并带浏览器前缀的CSS属性，或是对自定义属性、特殊语法处理不当，导致样式损坏。
  解决方式：可临时修改打包配置关闭CSS压缩验证问题，确认是压缩导致后，可通过craco、react-app-rewired等工具自定义CSS压缩规则，过滤不需要合并处理的属性。
• 基础样式未统一
  若未引入统一的样式重置文件，开发环境和生产环境打开的浏览器不同、或是浏览器版本差异也可能导致默认样式偏差，叠加业务代码后出现明显异常。
  解决方式：项目入口处引入normalize.css统一各浏览器的基础默认样式，消除原生样式差异。

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