Live Sass Compiler 扩展未正确配置或触发异常会导致 Sass/SCSS 保存不自动编译。需检查扩展启用状态、配置 .vscode/settings.json、手动触发 Watch、修正文件编码为 UTF-8（无 BOM），或改用 Sass CLI 配合 tasks.json 实现稳定监听。
如果您在使用 VSCode 编辑 Sass 或 SCSS 文件时，希望保存即自动编译为 CSS 并生成对应 map 文件，则可能是由于 Live Sass Compiler 扩展未正确配置或触发机制异常。以下是实现该功能的多种配置与修复方法：
本文运行环境：MacBook Air，macOS Sequoia。
一、确认扩展已正确安装并启用
Live Sass Compiler 必须处于启用状态，且版本需兼容当前 VSCode 版本，否则无法监听文件保存事件或启动编译进程。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入 Live Sass Compiler，确认作者为 Glenn Marks。
3、若显示“禁用”按钮，点击启用；若显示“安装”，完成安装后重启 VSCode。
二、设置工作区根目录下的 sassOptions 配置
扩展默认仅对位于工作区根目录或子目录中的 .sass/.scss 文件生效，且需明确指定输出路径与格式，否则编译可能静默失败或输出至错误位置。
1、在工作区根目录创建文件 .vscode/settings.json（若不存在）。
2、在该文件中写入以下内容（确保缩进为 2 空格，无语法错误）：
3、保存文件后，重新打开一个 .scss 文件并尝试保存，观察右下角是否出现 Compiling SASS/SCSS 提示。
三、手动触发编译以验证扩展响应能力
当自动编译未响应时，可绕过保存监听机制，直接调用扩展命令，用于判断是监听失效还是编译引擎本身异常。
1、按下 Cmd+Shift+P 打开命令面板。
2、输入 Live Sass: Watch My Sass 并回车。
3、观察 VSCode 右下角状态栏是否新增 Live Sass Compiler Active 标识及实时路径提示。
四、检查文件编码与 BOM 头干扰
某些编辑器导出的 SCSS 文件可能包含 UTF-8 with BOM 编码头，Live Sass Compiler 在解析时会因非法字符中断，导致编译不触发。
1、在 VSCode 中打开目标 .scss 文件。
2、点击右下角编码标识（如显示“UTF-8”），选择 Save with Encoding → UTF-8（非 UTF-8 with BOM）。
3、关闭并重新打开该文件，再次保存，确认编译是否恢复。
五、替换为替代编译方案：使用 Sass CLI 配合 VSCode 任务
若 Live Sass Compiler 持续异常且无法定位原因，可完全绕过该扩展，改用官方 Sass CLI 实现相同实时编译效果，具备更高稳定性与可控性。
1、在终端执行 npm install -g sass 安装 Dart Sass 命令行工具。
2、在工作区根目录创建 .vscode/tasks.json，填入标准 watch 任务配置。
3、通过 Cmd+Shift+P 运行 Tasks: Run Task → watch:sass 启动监听。
