sublime text 实现 sass 保存即编译需用 sublimeonsavebuild 配系统级 dart sass cli:先 npm install -g sass,验证 sass --version 输出如 1.77.6,再新建 sass.sublime-build 指定绝对路径调用 sass 命令,重启编辑器生效。

Sublime Text 没有叫 SassBuilder 的官方或主流插件——你搜到的“SassBuilder”大概率是过时、混淆命名,或是把 Sass 插件 + SublimeOnSaveBuild 误传为一个东西。真要实现保存即编译,必须用 SublimeOnSaveBuild 配系统级 sass CLI,别在插件名上浪费时间。
确认你装的是 Dart Sass,不是 Ruby Sass 或 node-sass
所有编译失败的根源,90% 出在这里:sass --version 在终端输出必须是类似 1.77.6 这样的数字(Dart Sass),而不是 3.4.22(Ruby Sass,已废弃)或报错。
不满足这个前提,后面全白搭。
- 执行
npm install -g sass(别加sudo,也别用cnpm) - 关掉 Sublime,重新从 Dock / 开始菜单启动——它不继承终端的
$PATH,旧进程缓存会卡住 - macOS 用户若用 Homebrew 安装了 Node,
which sass结果通常是/opt/homebrew/bin/sass;Windows 用户运行where sass,常见路径是C:\Users\Alice\AppData\Roaming\npm\sass.cmd - 如果
sass --version有效但 Sublime 里仍报command not found,构建系统里必须写绝对路径,不能只写sass
用 SublimeOnSaveBuild + 自定义 .sublime-build 实现保存即编译
这是目前最稳、报错可见、支持 @use/@forward 的方案。LiveSassCompiler 等插件只监听当前 tab,改了 _variables.scss 却没切回 main.scss 保存,CSS 就不会更新——这不是 bug,是设计限制。
- 安装插件:
Ctrl+Shift+P→Package Control: Install Package→ 输入SublimeOnSaveBuild - 新建构建系统:
Tools → Build System → New Build System,粘贴以下内容并保存为Sass.sublime-build:
{
"cmd": ["sass", "--no-source-map", "$file", "${file_path}/${file_base_name}.css"],
"selector": "source.scss, source.sass",
"file_regex": "^(.*?):([0-9]+):([0-9]+) (.*)$"
}
-
--no-source-map必须加,否则构建常卡住;需要 sourcemap 就换--embed-sources -
selector必须是source.scss, source.sass,否则保存不触发 - 右下角状态栏必须显示
SCSS或Sass,否则构建系统压根不匹配
想监听 @use 和 @import 子文件变更?别靠 Sublime
所有 Sublime 插件(包括 LiveSassCompiler、EasyLess、SCSS)都只监听当前激活 tab。改了 _mixins.scss,但没手动切回去保存主文件,CSS 就不会重编译。
- 真正解决依赖重编译,唯一可靠方式是终端运行:
sass --watch src/scss:dist/css - 它会递归监听整个目录树,包括所有被
@use或@import引入的文件 - 插件里配的
output_dir或include_paths对--watch模式完全无效 - 可以同时开着 Sublime 编辑 + 终端
--watch,互不干扰;前者管单次验证,后者管真实开发流
最容易被忽略的一点:Sublime 启动时的环境变量是静态快照,哪怕你刚在终端装好 sass,不重启 Sublime 就永远找不到命令。别调半天配置,先关再开。











