Sublime Text安装并配置SassBuilder自动监测编译-sublime-PHP中文网

Sublime Text 无法自动监测 Sass 编译，需手动配置终端 sass --watch、Sublime 构建系统及浏览器 LiveReload 三者协同；插件如 SassBuilder 已失效，推荐 SublimeOnSaveBuild + 自定义构建系统 + 终端独立监听。

sublime text安装并配置sassbuilder自动监测编译

Sublime Text 本身不提供自动监测编译能力，所谓 “SassBuilder” 并非官方或主流插件，也无稳定维护；你看到的“自动监测”实际是误用或混淆了构建系统、watch 进程和 LiveReload 的边界。真要实现可靠编译，必须拆解为三件事：终端跑 sass --watch、Sublime 正确调用 sass 命令、浏览器通知链路打通——缺一不可，且不能指望一个插件全包。

确认系统级 `sass` 命令可用，不是“装了就行”

npm 全局安装 sass（Dart Sass）只是第一步，Sublime 启动时根本看不到你的 shell PATH：

macOS/Linux：在终端执行 which sass，拿到类似 /opt/homebrew/bin/sass 或 /usr/local/bin/sass 的绝对路径
Windows：运行 where sass，常见结果是 C:\Users\Alice\AppData\Roaming\npm\sass.cmd
如果用了 nvm，确保当前 Node 版本下已执行 nvm use 20 && npm install -g sass
关掉 Sublime，**从 Dock / 开始菜单重新启动**——否则旧环境变量仍被缓存

别信“SassBuilder”类插件，用 `SublimeOnSaveBuild` + 自定义构建系统最稳

所谓 SassBuilder 插件早已停止更新，不支持 @use、@forward，报错静默，监听范围仅限当前 tab。推荐组合：

安装插件：Ctrl+Shift+P → Package Control: Install Package → 搜 SublimeOnSaveBuild
新建构建系统（Tools → Build System → New Build System），贴入以下内容并保存为 SCSS.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]+) (.*)$"
}