Laravel Mix执行npm run dev编译SCSS后页面背景色修改不生效问题排查

解决步骤 #

• 优先排查浏览器缓存问题：按下Ctrl+Shift+R（Mac为Cmd+Shift+R）强制硬刷新页面，或者使用无痕模式访问测试，绝大多数样式不生效都是静态资源被浏览器强缓存导致。
• 校验编译产物是否正常更新：打开public/css/app.css文件，搜索你添加的background: red !important以及$body-bg对应的#000值，如果文件内完全没有你的修改内容，说明编译链路存在问题：
  • 先删除public/css、public/js目录下的所有旧文件，再重新执行npm run dev编译
  • 检查你的Blade模板中引入CSS的写法是否正确，必须使用{{ mix('css/app.css') }}引入，不要硬写/css/app.css
• 检查自定义样式的书写顺序：你添加的body样式必须写在app.scss中@import '~bootstrap/scss/bootstrap';的后面，否则会被Bootstrap自带的样式覆盖。
• 浏览器开发者工具校验优先级：按下F12打开开发者工具，选中body元素，查看「样式」面板中background属性的生效规则，确认你的自定义样式是否被其他更高优先级的样式（如行内样式、后引入的CSS文件）覆盖。
• 清理Laravel缓存：依次执行以下命令清理框架缓存：

  php artisan view:clear
  php artisan cache:clear
  

• 尝试生产编译测试：如果dev模式增量编译异常，执行npm run prod全量编译后再测试是否生效。

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