Live Sass Compiler已停更且不兼容新版Node.js和现代Sass语法，应改用Dart Sass CLI配合VSCode tasks实现监听编译；需注意单任务仅支持单入口，多入口需多task或npm script，--watch才是官方推荐的实时增量编译方案。
Live Sass Compiler 插件不维护了，别再用它
Live Sass Compiler（ritwickdey.live-sass）自 2022 年底起已停止更新，官方明确标注为 Deprecated。它依赖过时的 node-sass（已归档），在 Node.js ≥16 环境下大概率报错，典型错误是：Cannot find module 'node-sass' 或 Module did not self-register。即使侥幸跑通，也无法支持现代 Sass 语法（如模块系统 @use、@forward）。
用 Dart Sass CLI + VSCode Tasks 替代更可靠
官方推荐的替代方案是直接使用 sass（Dart Sass）命令行工具，配合 VSCode 的 tasks.json 实现保存即编译+压缩。这不是“插件替代”，而是回归工具链本质，可控性更强：
- 安装
sass：运行npm install -g sass（全局）或npm install --save-dev sass（项目级） - 在项目根目录创建
.vscode/tasks.json，内容如下：
{
"version": "2.0.0",
"tasks": [
{
"label": "sass:watch",
"type": "shell",
"command": "sass",
"args": [
"--watch",
"--style=compressed",
"--no-source-map",
"src/scss/main.scss:dist/css/main.css"
],
"group": "build",
"isBackground": true,
"problemMatcher": []
}
]
}
关键点：--style=compressed 启用压缩；--no-source-map 避免生成 .map 文件（如需调试可删掉）；路径格式必须是 输入文件:输出文件，不支持 glob 模式（如 src/scss/**/*.scss）
多个 Sass 文件怎么处理
一个 sass 命令只能监听单个入口文件。若项目有多个独立入口（如 admin.scss、theme.scss），不能靠一个 task 覆盖：
立即学习“前端免费学习笔记（深入）”；
- 方案一：写多个 task，每个对应一个入口，在
tasks.json中定义多个label - 方案二：用 npm script 封装，例如在
package.json中加："scripts": {"sass:watch": "sass --watch --style=compressed src/scss/:dist/css/"}—— 注意这里用了目录映射（src/scss/→dist/css/），但要求所有 .scss 文件都是独立入口（无_partial命名），否则会重复编译 partial - 方案三：真正需要多入口 + partial 复用时，必须用构建工具（如 Vite、Webpack），VSCode tasks 只适合简单场景
为什么不要用自动保存触发编译的“伪实时”方案
有些教程教你在 settings.json 里配 "emeraldwalk.runonsave": {"commands": [...]}，靠保存事件调用 sass 命令。这看似简单，实则问题明显：
- 每次保存都启动新进程，CPU 占用高，尤其文件多时容易卡顿
- 无法感知依赖变更（比如修改了
_variables.scss，但当前编辑的是main.scss，该方案不会重新编译） -
--watch模式才是 Sass 官方设计的增量监听机制，能正确追踪@import/@use依赖树
真正的“实时”只来自 --watch，不是靠保存钩子模拟出来的。
