VSCode需借助Dart Sass和Live Sass Compiler插件实现SCSS自动编译；全局安装sass、配置插件的formats/watchExclusions/generateMap/autoprefix等参数，保存即编译，注意避免下划线文件名、指定sassPath路径及UTF-8编码。
VSCode 本身不自带 SCSS 编译功能，需要借助插件和外部工具（如 Dart Sass）来实现保存时自动编译为 CSS。核心是配置好编译器路径、输入输出关系和触发时机。
安装 Dart Sass（推荐）
Dart Sass 是官方维护、性能好、兼容最新的 SCSS 语法。不建议用已停止更新的 Node Sass。
- 全局安装：npm install -g sass
- 验证是否成功：sass --version（应显示 1.70+ 版本）
- Windows 用户若提示命令未识别，请确认 npm 全局 bin 路径已加入系统环境变量
安装并配置 Live Sass Compiler 插件
这是 VSCode 中最常用、配置直观的 SCSS 编译插件（作者：Glenn Marks）。
- 在扩展市场搜索 Live Sass Compiler 并安装
- 按 Ctrl + , 打开设置 → 搜索 liveSassCompile.settings
- 关键配置项（可写入 settings.json）：
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
}
],
"liveSassCompile.settings.watchExclusions": [
"/node_modules/**",
"/**/vendor/**"
],
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": ["last 3 versions"]
}
说明：savePath: "/css/" 表示所有 .scss 文件编译后的 CSS 放在同级 css/ 文件夹；generateMap 设为 false 可避免生成 .map 文件（调试需要时再开启）。
立即学习“前端免费学习笔记（深入）”；
手动触发或监听保存
默认情况下，插件会在你保存 .scss 文件时自动编译。也可手动操作：
- 右键编辑器内 SCSS 文件 → 选择 Compile Sass 或 Watch Sass
- 快捷键：Ctrl + Shift + P → 输入 Live Sass: Watch Sass 启动监听
- 状态栏右下角会出现 SASS WATCHING 提示，点击可暂停/重启
常见问题快速排查
- 保存后没生成 CSS？ 检查文件名是否以 _ 开头（如 _variables.scss）——这是 Sass 的“局部文件”，不会单独编译，只被 @use 或 @import 引入
- 报错 “Command 'sass' not found”？ 插件找不到 Dart Sass，需在设置中指定完整路径，例如："liveSassCompile.settings.sassPath": "C:\Users\xxx\AppData\Roaming\npm\sass.cmd"（Windows）
- 中文注释乱码或编译失败？ 确保文件编码为 UTF-8（VSCode 右下角查看），并在 SCSS 文件顶部加 @charset "UTF-8";
