在VSCode中配置SCSS/Sass编译器并实时输出CSS-VSCode-PHP中文网

在VSCode中配置SCSS/Sass编译器并实时输出CSS

狼影

发布： 2025-11-04 23:50:01

原创

170人浏览过

安装 Easy Sass 插件可实现保存时自动编译 SCSS 到 CSS，支持自定义输出路径与编译风格；也可通过配置 tasks.json 使用 Dart Sass 监听编译，前者操作简单高效，适合多数项目。

在vscode中配置scss/sass编译器并实时输出css

在 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 并配置任务。

CapWords

AI语言学习工具，通过拍照把身边的物品变成学习素材

180

查看详情

全局安装 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 目录。