browsersync需正确配置监听路径和注入规则才能生效，关键在于用--files指定输出目录、确保link标签无限制属性、启用--inject-changes参数，并避免与构建工具hmr冲突。
为什么修改CSS后浏览器没反应？
不是代码写错了，大概率是浏览器缓存了旧样式表，或者开发服务器没开启热重载。Browsersync 默认会监听文件变化并注入新CSS，但前提是它得知道该监听谁、怎么注入。
- 确保
index.html中的<link>标签没加rel="stylesheet" media="print"这类限制条件，否则 Browsersync 注入失败 - 不要用
file://协议直接双击打开 HTML——Browsersync 需要 HTTP 服务才能注入 - 如果用了构建工具（如 Vite/Webpack），优先用它们原生的 HMR，Browsersync 在这类场景下反而容易冲突
如何让Browsersync正确监听并注入CSS？
Browsersync 不是自动识别“这是CSS就该重载”，它靠路径匹配和事件触发。关键在启动时指定监听范围和注入规则。
- 启动命令必须包含
--files，例如：browser-sync start --server --files "css/*.css, *.html" - 避免写成
--files "**/*.css"——某些 shell 会提前展开通配符，导致监听失效；用引号包裹更稳 - 若 CSS 是动态生成（如 PostCSS 输出到
dist/css/），监听路径必须指向最终输出位置，而非源码目录 - 注入只对
<link rel="stylesheet">生效，@import或 JS 动态加载的 CSS 不会被替换
修改CSS后页面闪一下，但样式没变？
这是注入成功但样式未生效的典型表现，通常卡在层叠或作用域上。
- 检查是否有多份同名
<link>标签（比如构建残留、模板重复引入），Browsersync 只能注入第一个 - 确认新CSS里没有被更高优先级选择器覆盖——注入不等于重算层叠，只是替换了文件内容
- 如果用了 CSS-in-JS 或 Shadow DOM，Browsersync 的注入机制完全不适用，它只操作全局 document 中的 link 标签
- Chrome 开发者工具里看 Network 面板：注入成功时会看到一个
__bs_reload__请求，且 CSS 文件响应状态是200而非304
能否跳过刷新，只替换CSS而不影响JS状态？
可以，但得关掉默认的 page reload 行为，启用 CSS injection 模式。
- 启动时加
--inject-changes参数，例如：browser-sync start --server --files "css/*.css" --inject-changes - 这个模式下，Browsersync 会尝试用
document.styleSheets替换对应 sheet 的cssText，而不是整个页面刷新 - 不支持
@import嵌套、url()中的相对路径跳转异常、以及某些伪类动画重置（比如:hover状态会丢失） - 如果注入后样式错乱，立刻按
Cmd+R / Ctrl+F5强制全量刷新——这是最可靠的兜底方式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
