VSCode本身不编译Sass，需依赖插件或本地sass CLI；Live Sass Compiler需手动配置formats、generateMap、includeItems三项关键设置，并注意不支持@use/@forward、避免BOM编码及下划线文件被忽略等问题。
VSCode 本身不编译 Sass，所谓“自动编译”本质是调用 Dart Sass 引擎——要么靠插件内置，要么靠你本地装好的 sass 命令行工具。没装引擎，所有设置都白搭。
Live Sass Compiler 插件怎么配才不踩坑
它轻量、免全局 Node 依赖，但默认配置几乎一定不符合你的项目结构，必须手动改三个关键项：
-
liveSassCompile.settings.formats：必须显式定义，比如[{"format": "expanded", "extensionName": ".css", "savePath": "/css/"}]，否则 CSS 默认生成在 SCSS 同级目录，容易和源码混在一起 -
liveSassCompile.settings.generateMap：设为true才生成.css.map，否则调试时点不到原始 SCSS 行号 -
liveSassCompile.settings.includeItems：以_开头的文件（如_mixins.scss）默认被跳过，想编译就得加进去，例如["**/_mixins.scss"]
别碰 liveSassCompile.settings.savePath —— 它会覆盖 formats 里的 savePath，纯属干扰项。
为什么保存后没生成 CSS？先盯这三处
不是插件坏了，大概率是路径或命名卡住了：
立即学习“前端免费学习笔记（深入）”；
- VSCode 左下角状态栏没显示你期望的工作区根目录？多文件夹工作区下，插件只监听第一个文件夹
- SCSS 文件编码是
UTF-8 with BOM？右下角点编码 →Save with Encoding → UTF-8再试 - 文件名是
_header.scss或abstract.scss这类？Dart Sass 规范里，下划线前缀=局部文件，不参与编译，除非你手动加进includeItems
tasks.json 调用 sass CLI 的实操要点
适合需要压缩、Source Map、或和构建流程对齐的场景，但前提是 sass 命令终端能直接运行：
- 先在终端跑
sass --version，确认输出类似1.77.2；报错就执行npm install -g sass -
tasks.json的args别写错顺序：["--watch", "src/scss/:dist/css/", "--style=compressed", "--source-map"] - Windows 用户注意路径分隔符，
src\scss\可能失败，统一用正斜杠src/scss/ - 别让终端里还跑着
sass --watch，和 Live Sass Compiler 同时写同一个.css文件，Windows 下极易写入冲突
最易被忽略的其实是 Sass 模块系统兼容性：Live Sass Compiler 不支持 @use 和 @forward，只认老式 @import。如果你的项目已全面迁移到 Dart Sass 新语法，那插件根本编译不过，只能切回 sass CLI 或构建工具。
