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:UsersxxxappDataRoamingnpmsass.cmd”（windows）
- 中文注释乱码或编译失败？ 确保文件编码为 UTF-8（VSCode 右下角查看），并在 SCSS 文件顶部加 @charset “UTF-8”;