Sublime Text 需配合 dart-sass 和 SublimeOnSaveBuild 插件实现保存即编译,关键步骤包括:安装 dart-sass、配置自定义 Sass.sublime-build 构建系统、确保 PATH 正确及文件后缀为 .scss。

Sublime Text 本身不内置 Sass 编译能力,必须借助插件 + 外部编译器(如 sass CLI 或 dart-sass)才能实现保存即编译。直接装个插件不配环境,90% 的人会卡在“没反应”或“command not found”上。
确认系统已安装 dart-sass(不是 Ruby Sass)
Ruby 版 sass 已废弃多年,官方推荐且唯一维护的是 Dart 实现的 dart-sass。它不依赖 Ruby,安装快、兼容性好、输出标准 CSS。
-
macOS:用
brew install sass/sass/sass(推荐),或npm install -g sass - Windows:用
npm install -g sass(确保 Node.js ≥ 14) - 验证是否可用:终端运行
sass --version,应输出类似1.77.2 - 如果报
command not found: sass,说明npm全局 bin 路径未加入系统PATH,需手动补全(Windows 尤其常见)
安装 SublimeOnSaveBuild 插件(轻量可靠)
别用老掉牙的 SCSS 插件或 Sass(Ruby 时代遗留),它们只负责语法高亮,不处理编译。真正干活的是构建系统(Build System)+ 保存触发插件。
- 打开 Sublime →
Cmd+Shift+P(macOS)或Ctrl+Shift+P(Win/Linux)→ 输入Package Control: Install Package - 搜索并安装
SublimeOnSaveBuild(不是OnSaveBuild,注意前缀) - 该插件作用很明确:每次保存
.scss或.sass文件时,自动调用当前激活的 Build System - 它不带任何预设规则,完全靠你后续配置的 Build System 驱动,所以灵活、无冲突、不拖慢启动
配置自定义 Build System(关键步骤)
Sublime 默认没有 Sass 构建规则,必须手动写一个 JSON 文件,告诉它怎么调 sass 命令。路径和参数错一个,就编译失败。
立即学习“前端免费学习笔记(深入)”;
- 菜单栏 →
Tools → Build System → New Build System… - 替换全部内容为以下配置(适配 macOS / Linux;Windows 用户把
cmd改成shell_cmd并加引号):
{
"cmd": ["sass", "--no-source-map", "--style=expanded", "$file", "$file_path/$file_base_name.css"],
"selector": "source.scss, source.sass",
"file_regex": "^(...*?):([0-9]+):([0-9]+)",
"working_dir": "$file_path"
}
-
--no-source-map:禁用 sourcemap(避免生成 .css.map 文件干扰) -
--style=expanded:输出易读格式(可选compressed) -
$file_path/$file_base_name.css:确保 CSS 输出到同目录,文件名一致 - 保存为
Sass.sublime-build(默认位置即可) - 然后在
Tools → Build System中选择刚建的Sass
验证与排错要点
即使配置完成,也常因路径、权限或扩展名问题失败。别急着重装插件,先看这几处:
- 确保文件后缀是
.scss(不是.sass或.css),且文件内有合法 Sass 语法(比如$color: red; body { color: $color; }) - 保存时看窗口右下角状态栏:若显示
Building...然后消失,说明构建被触发但可能静默失败;打开Ctrl+`控制台,查看是否有File not found或command not found - 如果提示
Permission denied(macOS/Linux),说明sass命令不在用户 PATH 中,改用绝对路径:/opt/homebrew/bin/sass(Homebrew 安装位置)或~/.npm-global/bin/sass(npm 全局安装位置) - Windows 用户若用
npm install -g sass,shell_cmd应写成"cmd": ["sass.cmd", ...],否则找不到命令
最常被跳过的环节是验证 sass 是否真能从终端任意路径调用——这点没搞定,后面所有配置都是白忙。










