VS Code 需通过 Live Sass Compiler 插件编译 SCSS，关键在正确配置：安装后手动启动监听，设置 savePath 输出 CSS 到指定目录，配合 Live Server 并关闭其 ignoreFiles 限制，启用 source map 且浏览器开启相关选项。
VS Code 本身不直接支持 SCSS 编译，必须依赖插件；Live Sass Compiler 是目前最稳定、配置最灵活的方案，但默认行为容易导致 CSS 文件乱放、映射失效或热更新中断——关键不在“装没装”，而在“配没配对”。
Live Sass Compiler 插件安装与基础监听启动
插件必须从 VS Code 扩展市场安装，不能靠 npm 或命令行全局安装。装完后需手动触发监听，否则改了 .scss 文件也不会生成 CSS。
- 打开扩展面板（
Ctrl+Shift+X），搜索Live Sass Compiler，选 Ritwick Dey 版本（作者已维护多年，兼容 VS Code 1.90+） - 新建一个
styles.scss文件（哪怕只写$color: red;），保存它 - 点击右下角状态栏的
Watch Sass按钮 —— 这步不可跳过，没有它就不会监听文件变化 - 确认输出面板（
Ctrl+Shift+U）里出现Watching...和路径信息，才算真正启用
编译后 CSS 路径和命名必须显式配置
默认情况下，Live Sass Compiler 会把 index.scss 编译成同目录下的 index.css，但多数项目结构要求 CSS 输出到 css/ 或 dist/css/。不改配置，就只能手动挪文件或改 HTML 的 <link> 路径。
- 打开设置（
Ctrl+,），搜Live Sass Compile: Settings - 点击
Edit in settings.json，在settings.json中添加或替换liveSassCompile.settings.formats字段 - 推荐配置（输出到项目根目录下的
css/文件夹）："liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/css/" } ] -
~表示当前.scss文件所在目录，不是项目根目录；如果想固定输出到项目根下的css/，用"/css/"（注意开头是斜杠） - 改完配置后，必须重启监听：先点右下角
Stop Watching Sass，再点Watch Sass
为什么改了 SCSS 但浏览器没更新？检查这三个地方
常见现象是 CSS 文件生成了，但页面样式没变——问题往往不在编译环节，而在预览链路断了。
立即学习“前端免费学习笔记（深入）”；
-
Live Sass Compiler只负责生成 CSS，不负责刷新浏览器；必须配合Live Server插件才能自动重载 - 确保 HTML 中引用的是编译后的
.css文件（比如<link rel="stylesheet" href="css/styles.css">），而不是原始.scss -
Live Server默认忽略.scss文件变更（这是它的安全策略），所以你得手动在settings.json里关掉这个限制："liveServer.settings.ignoreFiles": ["**/*.scss", "**/*.sass"]
否则改了 SCSS，Live Server 根本不触发刷新 - 如果用了自定义端口或子目录（如
"liveServer.settings.root": "/src"），要确认 CSS 路径跟href中的相对路径能对上
source map 不生效？别漏掉 .map 文件的生成开关
调试时点开开发者工具看到的还是 CSS 行号，说明 .css.map 没起作用。这通常是因为编译配置里没开 map 生成，或者浏览器禁用了 source map。
-
Live Sass Compiler默认开启 source map，但前提是你的formats配置里没显式关闭它（不要加"sourceMap": false） - 检查编译后是否同时生成了
styles.css和styles.css.map两个文件；缺一个就说明配置被覆盖或插件冲突 - Chrome 开发者工具中需开启：Settings → Preferences → Sources → ✅ “Enable CSS source maps” 和 “Auto-reload generated CSS”
- 如果用的是旧版插件（v5.x 以下），可能不支持新版 VS Code 的 API，建议卸载重装最新版（v6.0+）
真正卡住人的从来不是“怎么装”，而是配置项之间的隐式依赖：比如 savePath 写错会导致 .map 生成失败，而 .map 失败又会让开发者误以为编译根本没运行；ignoreFiles 漏配会让 Live Server 对 SCSS 修改完全无感——这些细节不逐个验证，光看教程步骤是跑不通的。
