VS Code中Live Server保存CSS后页面重载样式不生效如何解决

按以下优先级逐次排查，绝大多数场景都能解决问题：

• 检查HTML内CSS引用正确性
  打开index.html定位到样式引入的<link>标签，确认三个核心点：
  1. rel属性值必须为stylesheet，不能写错成styleshee/style这类错误值
  2. href路径和实际文件位置完全匹配，如果三个文件同属项目根目录，正确写法参考：

  <link rel="stylesheet" href="style.css">
  

  3. 文件名大小写完全一致，本地开发服务在部分环境下对文件名大小写敏感，Style.css和style.css会被识别为两个不同文件
• 处理浏览器缓存问题
  自动重载触发的页面刷新经常会命中浏览器强缓存，拉取到旧的CSS文件：
  1. 直接执行硬刷新操作：Windows/Linux按Ctrl+Shift+R，Mac按Cmd+Shift+R
  2. 打开浏览器开发者工具，切换到「网络」面板，勾选禁用缓存选项，保持开发者工具打开状态再测试保存CSS
• 调整自动重载插件配置
  如果你用的是Live Server类的自动刷新插件：
  1. 打开VS Code设置，搜索Live Server: Css Inject，确认该选项为开启状态，开启后CSS修改会直接热注入到页面，不需要整页重载，能彻底规避重载时的缓存问题
  2. 检查项目下.vscode/settings.json文件，确认没有配置错误的文件监听排除规则，避免插件没捕获到CSS的真实修改，只触发了无效的空重载
• 排查CSS本身的解析问题
  1. 打开浏览器开发者工具，切换到「元素」面板，选中对应DOM节点，看「样式」栏下你写的CSS规则是否被更高优先级的样式（内联样式、其他选择器规则）覆盖
  2. 检查VS Code的问题面板，确认CSS文件没有语法错误（比如漏写闭合大括号、属性值格式非法），这类错误会导致浏览器加载了CSS文件但完全无法解析。可以先在CSS文件最顶部写测试规则验证：

  body {
    background: red !important;
  }
  

  保存后如果页面背景变红，说明原有CSS代码存在语法错误，逐段注释排查即可。

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