live server默认不监听css/js变更，仅响应html类文件保存；改样式无反应主因是路径错误、未启动服务（右下角无port提示）或浏览器缓存，需检查network面板状态码、禁用缓存或换vite实现hmr。
VSCode 本身不运行 CSS，也不刷新浏览器——它只是编辑器。样式不生效、改了没反应，问题一定出在「文件没被正确加载」或「浏览器没重新读取」这两个环节。
为什么改完 CSS 保存后页面没变化
Live Server 插件默认只监听 .html、.htm 等模板类文件的保存事件，.css 和 .js 文件修改后不会触发自动刷新。这不是 bug，是设计如此。
- 浏览器地址栏显示的是
file://协议？那根本没走服务器，所有相对路径、CSS 加载、热更新都会失效 - 右下角没显示
Port: 5500？说明 Live Server 根本没启动成功，不是“慢”，是压根没跑起来 - 修改了
style.css，但浏览器 Network 面板里看不到该文件请求？大概率是<link>标签写错了，比如rel="sytlesheet"（多 y 少 t） - 路径写成
href="/css/style.css"，但 HTML 在src/pages/index.html？Live Server 的根路径就是该 HTML 所在目录，/css/会被解析成服务器根，而实际文件在src/css/→ 404
如何让改 CSS 后立刻看到效果
最稳的两条路：要么强制刷新，要么换工具链。别指望 Live Server 自动响应 CSS 变更。
- 装插件
Refresh Page on Save：它不依赖 Live Server，可监听任意后缀（如css、js），保存即 F5 - 用
Vite替代 Live Server：npm create vite@latest→ 选 vanilla + HTML 模板 →npm run dev，改 CSS 会 HMR（热模块替换），DOM 不重刷，样式秒更新 - 如果坚持用 Live Server，手动配
"liveServer.settings.root": "./src"到.vscode/settings.json，确保 HTML 和 CSS 路径能对齐 - 开发时打开 Chrome DevTools → Network → 勾选
Disable cache（仅在开发者工具开启时生效），避免缓存干扰
为什么浏览器里能看到 HTML 但样式全丢了
90% 是路径或加载失败导致的。不要猜，直接看 Network 面板。
-
<link rel="stylesheet" href="style.css">中的href必须拼写为stylesheet，错一个字母（如styleSheet、sytlesheet）浏览器就完全忽略 - 检查 Network 面板：
style.css是否出现？状态码是不是200？如果是404或failed，说明路径不对；如果是灰色（pending），可能是 uBlock Origin 等插件拦截了 localhost 的 WebSocket - CSS 文件里有语法错误（比如漏了
}或;）？某些构建工具或插件会静默跳过整个文件，VSCode 右下角编码格式要是UTF-8（无 BOM） - 用了 scoped 样式（如 Vue SFC）或 Shadow DOM？外部 CSS 默认无法穿透，得用
::slotted、:host或!important（慎用）
真正卡住人的，往往不是技术多难，而是你改的是 A 文件，却盯着 B 页面看效果；或者路径看着对，其实服务器根和你想象的根根本不是一回事。先打开 Network，确认 CSS 文件是否被加载、是否 200，这一步省掉，后面全白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
