能实现css即时重载，但必须满足三个硬性条件：css通过引入、browsersync监听最终输出的css文件、启动时启用--inject-changes模式；缺一不可，否则页面无反应。
能实现，但必须满足三个硬性条件：CSS 是通过 <link rel="stylesheet"> 引入的、Browsersync 监听到的是最终输出的 CSS 文件、启动时明确启用了 --inject-changes 模式。缺一不可。
为什么改了 CSS 文件，页面没反应？
最常见原因不是 Browsersync 没运行，而是它根本没“看到”你改的文件，或者看到了但没注入成功。
-
--files路径写错：比如写成"src/css/*.css"，但实际构建后 CSS 输出在dist/css/—— Browsersync 只监听源码路径，不会自动追踪构建产物 - Shell 通配符提前展开：写
--files **/*.css（没加引号），某些终端会把**展开成当前目录下所有 .css 文件列表，导致监听失效；正确写法是--files "**/*.css" -
<link>标签带干扰属性：比如rel="stylesheet" media="print"或disabled，Browsersync 只注入rel="stylesheet"且未禁用的 link 标签 - 用了
@import或 JS 动态插入样式：Browsersync 的注入机制只操作 DOM 中的<link>元素，对@import、document.createElement("style")等方式完全无效
如何确保 CSS 修改后只替换样式，不刷新整个页面？
关键在启动参数：必须显式加上 --inject-changes，否则默认行为是整页 reload。
- 正确命令示例：
browser-sync start --server --files "dist/css/*.css" --inject-changes - 注入生效时，Chrome DevTools Network 面板会看到一个
__bs_reload__请求，状态码是200（不是304） - 注入后若样式没变，不是注入失败，而是层叠优先级问题：新 CSS 里的规则可能被更高权重的选择器覆盖，检查 DevTools Elements 面板中对应样式是否被划掉
- 注意动画伪类丢失：注入会重置
:hover、:focus等交互状态，这是机制限制，无法避免
和 Vite/Webpack 等构建工具共存时怎么避免冲突？
别共存 —— 这是多数人踩坑的根源。Browsersync 和现代构建工具的 HMR（Hot Module Replacement）底层逻辑不同，强行一起跑大概率互相干扰。
- 如果项目已用 Vite，直接关掉 Browsersync，用
vite命令启动，它原生支持 CSS HMR，且能保持 JS 状态 - 如果必须用 Browsersync（比如纯静态站点或遗留项目），就停掉 Webpack Dev Server 或其他本地服务，避免端口和文件监听冲突
- Hexo 主题开发等场景例外：因为 Hexo build 是离线生成静态文件，没有运行时 HMR，这时 Browsersync 监听
public/目录下的输出文件是合理且必要的
真正容易被忽略的点是：Browsersync 注入只认 <link> 标签的 DOM 位置，如果你模板里有两份相同的 <link href="main.css">，它只会替换第一个 —— 构建残留、多入口模板拼接、甚至 CMS 插件自动插入都可能导致这种重复，得手动清理 DOM。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
