Browser Sync仅无法刷新CSS变更？问题排查求助

针对你遇到的CSS文件变更被Browser Sync识别但页面不刷新的问题，可尝试以下几种排查和解决方法：

• 检查CSS注入机制
  Browser Sync默认对CSS文件采用注入更新而非整页刷新，若注入失败就会出现文件被识别但页面无变化的情况。可以：

  • 显式开启注入模式：在dev:bs命令中添加--inject-changes true参数；
  • 增加文件变更的延迟时间：添加--reload-delay 1000（单位毫秒），避免文件未完全生成就触发监听事件；
  • 检查页面中CSS的引用路径：如果是绝对路径，需确保代理后的域名（localhost:3000）能正常访问该CSS文件，必要时添加--rewrite-rules '{"^你的原开发域名": "localhost:3000"}'来重写域名映射。

• 优化文件监听规则与编译顺序
  若你是通过SCSS编译生成CSS，需确保SCSS编译完成后，对应的CSS文件变更才被Browser Sync监听。当前配置同时监听SCSS和CSS文件，可能SCSS刚变更就触发事件，但CSS还未更新。可以调整监听范围，只监听最终生成的CSS文件，或者使用wait-on工具等待webpack编译完成后再启动Browser Sync：

  1. 先安装依赖：npm install wait-on --save-dev
  2. 修改scripts配置：

     "dev": "run-s dev:webpack dev:bs",
     "dev:bs": "wait-on ./style.css ./js/dist/*.js && browser-sync start --proxy '[my dev domain here]' --files 'style.css, **/*.css, ./*.php, ./**/*.php, ../../lib/**/*.php, ./js/dist/*.js, ./js/product-list/dist/*.js'"
     

• 排查浏览器缓存问题
  浏览器可能缓存了旧的CSS文件，即使Browser Sync触发了注入，也无法加载新内容。可以：

  • 在浏览器开发者工具中勾选「禁用缓存」选项（需保持开发者工具打开）；
  • 在开发环境中为CSS引用添加动态版本号，避免缓存。

• 降级Browser Sync版本
  当前使用的3.0.2版本可能存在兼容性bug，此前正常工作的配置在新版本中失效。可以尝试降级到稳定的2.x版本：

  npm install browser-sync@2.29.3 --save-dev
  

• 检查代理配置的正确性
  确认--proxy后的开发域名[my dev domain here]能正常访问，且该域名下的CSS文件路径与本地文件路径完全对应。若代理域名和本地文件的映射存在问题，会导致Browser Sync无法正确注入更新。

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