在 vscode 中配置 scss/Sass 编译器并实现保存时自动编译成 CSS，可以通过安装插件和设置任务来完成。整个过程不依赖外部命令行工具，操作简单高效。

安装 Easy Sass 插件

VSCode 市场中有多个 Sass 编译插件，推荐使用 Easy Sass，它支持保存 SCSS 文件时自动编译为 CSS。

• 打开 VSCode，进入扩展面板（Ctrl+Shift+X）
• 搜索 “Easy Sass”
• 点击安装

安装后无需额外配置即可使用，默认将 .scss 文件编译到同级目录下的 CSS 文件中。

修改 Easy Sass 输出选项（可选）

如果想自定义输出路径、文件后缀或编译格式，可以调整插件设置。

立即学习“前端免费学习笔记（深入）”；

• 打开设置（Ctrl+,）
• 搜索 “easy sass”
• 常见配置项：

Output Directory：指定 CSS 输出目录，例如设为 ./css 则所有编译结果存入该文件夹
Output Style：选择编译风格，如 nested、expanded、compact、compressed
include Path：添加引用路径，方便 @import 查找文件
Autoprefixer：部分版本支持自动添加浏览器前缀，按需开启

手动配置 Task 编译（替代方案）

如果你更倾向使用官方 Sass 编译器（Dart Sass），可通过 node.js 安装 sass 并配置任务。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

• 全局安装 sass：npm install -g sass
• 在项目根目录创建 .vscode/tasks.json
• 写入以下内容：

{ “version”: “2.0.0”, “tasks”: [ { “label”: “Compile Sass”, “type”: “shell”, “command”: “sass –watch scss:css”, “isBackground”: true, “presentation”: { “echo”: true, “reveal”: “never” }, “problemMatcher”: “$lessCompileError” } ] }

然后通过 “运行任务” 启动监听，scss 目录下的所有 Sass 文件会自动编译到 css 目录。

启用保存自动编译

确保 VSCode 开启了自动保存功能，配合 Easy Sass 可实现即时反馈。

• 文件 → 自动保存（勾选）
• 编辑 SCSS 文件并保存，对应 CSS 文件将立即生成或更新

若使用 tasks.json 方案，需手动启动一次任务，之后持续监听变化。

基本上就这些。用 Easy Sass 最省事，适合大多数前端项目；需要精细控制时再考虑自定义 task。配置完成后，开发体验流畅自然。