Live Server 是 HTML + Sass 开发的基线配置，解决本地服务器、跨域限制和自动刷新问题；Sass 必须编译为 CSS 后引入 HTML，Live Server 确保修改保存后页面实时更新，前提是路径匹配且服务运行在 http:// 而非 file:// 协议。
Live Server 是 HTML + Sass 开发的基线配置
不装 Live Server，就别谈“运行 HTML”——它解决的是本地服务器、跨域限制、自动刷新这三件硬事。Sass 文件本身不能被浏览器直接加载，必须编译成 CSS 后再引入 HTML，而 Live Server 能确保你改完 .scss 保存后，刷新页面看到的是最新样式（前提是 CSS 已正确生成并被 HTML 引用）。
安装插件后，右键 HTML 文件选 Open with Live Server，地址变成 http://127.0.0.1:5500/index.html，不是 file:// 协议，fetch、@import、相对路径引用等行为才和生产环境一致。
Live Sass Compiler 必须配 savePath 才能和 HTML 对上路
默认情况下，Live Sass Compiler 把 styles.scss 编译成同目录下的 styles.css，但多数人会把 CSS 输出到 /css 子目录，HTML 中却还写 <link rel="stylesheet" href="styles.css">，结果就是样式不生效，控制台也无报错——因为文件根本没加载。
在项目根目录的 .vscode/settings.json 中加这段配置：
立即学习“前端免费学习笔记（深入）”；
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
]
}
之后 HTML 中就得写成：
<link rel="stylesheet" href="css/styles.css">
否则路径断开，样式白编译。
Watch Sass 按钮要点一次，且只点一次
插件安装完不会自动监听，你得手动点右下角的 Watch Sass 按钮（或按 Ctrl+Shift+P 输入 Live Sass: Watch Sass）。点了以后，VS Code 状态栏会显示 “Watching .scss files”，这时修改并保存任何 .scss 文件，都会立刻生成对应 .css 和 .css.map。
常见错误包括：
- 点了两次
Watch Sass，导致终端里出现重复监听日志，但实际不影响编译 - 点了按钮但没保存
.scss，误以为没反应——它只响应保存动作，不响应编辑中 - 关闭 VS Code 后重开，监听自动停止，需要重新点一次
HTML 中不能直接引用 .scss 文件
浏览器不认识 .scss，所以 <link rel="stylesheet" href="styles.scss"> 这种写法永远无效，也不会报错，只是样式不出现。
必须确保两件事同时成立：
-
.scss文件已被 Live Sass Compiler 成功编译出同名.css（检查/css目录下是否有对应文件） -
<link>的href值与生成的.css实际路径完全一致（大小写、斜杠方向、有无前导/都要核对） - Live Server 正在运行（地址是
http://开头，不是file://）
路径错一个字符，样式就消失，而且没有明显提示——这是最常卡住人的地方。
