VSCode本身不编译CSS预处理器，所有自动编译均依赖外部工具；必须先全局安装Dart Sass（npm install -g sass）并验证sass --version可用，再配置Live Sass Compiler插件或tasks.json调用sass CLI实现保存即编译。
VSCode 本身不编译任何 CSS 预处理器，所谓“自动编译”全是靠外部工具驱动；Sass（Dart Sass）是目前唯一被官方维护、全面支持 @use/@forward、且与 VSCode 集成最稳的选项——别碰 node-sass 或过时插件，它已废弃，连 sass --version 都报错。
确认 sass 命令在 VSCode 终端里能跑通
这是所有方案的前提，90% 的“保存没反应”卡在这一步。
- 打开 VSCode 终端（
Ctrl+`），执行sass --version；如果报command not found，说明没装或 PATH 没生效 - 运行
npm install -g sass（不是node-sass）；pnpm 用户需确认$HOME/.local/share/pnpm在$PATH中 - macOS/Linux 装完必须重启 VSCode，否则终端无法继承新 PATH
- Windows 用户若用 PowerShell，可能需以管理员身份运行终端再试一次
Live Sass Compiler 插件必须改的三项配置
它默认把 .css 生成在 .scss 同级目录，不带 .map，还跳过所有 _mixins.scss 类文件——这不是 bug，是默认行为。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
-
liveSassCompile.settings.formats必须显式写，例如[{"format": "expanded", "extensionName": ".css", "savePath": "/css/"}]，否则 CSS 乱堆在源码旁边 -
liveSassCompile.settings.generateMap设为true，不然 DevTools 里点不到原始 SCSS 行号 -
liveSassCompile.settings.includeItems得加["**/_*.scss"]，否则下划线开头的 partial 文件全被跳过 - 删掉
liveSassCompile.settings.savePath——它会覆盖formats里的savePath，纯属干扰项
用 tasks.json 调 sass --watch 更可靠
适合中大型项目，或你已经用了 @use 和 @forward。插件不支持这些语法，但 CLI 支持。
立即学习“前端免费学习笔记（深入）”；
- 在项目根目录建
.vscode/tasks.json，内容含"command": "sass"和"args": ["--watch", "src/scss/:dist/css/", "--style=expanded", "--source-map"] - 路径统一用正斜杠
/，Windows 下写src\scss:dist\css容易解析失败 - 必须开启 VSCode 的“保存时运行任务”：设置里搜
save without build，把Tasks: Save Without Build设为false - 别同时开 Live Sass Compiler 和
sass --watch，两个进程抢写同一个.css文件，Windows 下常写空或锁死
真正容易被忽略的是文件编码和工作区根目录：右下角状态栏没显示你预期的项目路径？插件只监听第一个文件夹；右下角写着 “UTF-8 with BOM”？立刻点它 → Save with Encoding → 选 UTF-8，BOM 头会让整个编译静默退出，连日志都不打。
