React项目create-react-app构建后部分CSS样式失效异常问题求助

问题排查与解决方案 #

第一步：先排除本地文件打开的路径问题 #

create-react-app 生产构建产物默认需要部署在HTTP服务上运行，直接双击打开build/index.html会因为本地文件的相对路径解析规则异常，偶发部分样式、资源加载异常。
你可以先执行以下命令验证：

1. 全局安装本地静态服务工具：npm install -g serve
2. 进入项目根目录执行：serve -s build
3. 访问终端提示的本地服务地址（通常为http://localhost:3000），查看样式是否恢复正常
   如果这一步样式恢复正常，说明是直接打开本地文件的问题，正式部署到服务器后不会出现该异常。

第二步：若服务运行仍有样式异常，按以下顺序排查 #

• 打开Chrome开发者工具元素面板，选中失效的Contact Us标题元素，查看右侧样式面板：
  1. 如果你写的对应样式规则不存在：检查CSS文件中该规则的语法是否正确，是否存在少写大括号、分号、属性名拼写错误的问题，生产环境CSS压缩工具会自动删除语法错误的规则
  2. 如果你写的规则存在但是被划掉：说明存在更高优先级的同名规则覆盖了你的样式，开发环境样式按引入顺序加载未触发覆盖，生产构建合并CSS后顺序变化导致覆盖，你可以给该规则增加更具体的选择器（比如加上父元素类名）提高优先级即可
• 排查整个CSS文件中是否存在重复命名的类名，不同规则作用在同一个类名上会出现偶发生效的问题
• 如果你用了CSS预处理器（如Sass、Less），检查是否有嵌套层级写错、变量未定义的问题，开发环境的热更新容错机制会忽略部分小错误，生产构建时会导致对应规则失效

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