Sublime如何配置Sass实时编译？-sublime-PHP中文网

sublime text 本身不支持实时编译，必须用终端运行 sass --watch src/scss:dist/css 才能递归监听所有 @use/@import 子文件变更；插件仅监听当前激活 tab，且不报错、不兼容新语法，90% 的“无反应”源于 sublime 启动时找不到 sass 命令。

sublime如何配置sass实时编译？

Sublime Text 本身不支持实时编译，所谓“保存即编译”只是单次调用 sass 命令；真要监听 @use、@import 子文件变更并自动重编译，必须用 sass --watch 在终端独立运行——插件做不到这点。

为什么保存 .scss 文件没反应，控制台也不报错

90% 是 Sublime 启动时根本找不到 sass 命令。它不继承终端的 $PATH，哪怕你在 iTerm 里 sass --version 跑得飞起，Sublime 也当它不存在。

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

别信插件能自动感知子文件变更

所有 Sublime 插件（LiveSassCompiler、EasyLess、SCSS）都只监听当前激活的 tab。改了 _variables.scss，但没切回 main.scss 保存，CSS 就不会更新——这不是 bug，是设计限制。

Codearts代码智能体

一款AI开发辅助工具，主要用于华为云Codearts平台推出的AI编码智能体，适合需要提升相关任务效率的用户。

下载

sass --watch src/scss:dist/css 才会递归监听整个目录树，包括所有被 @use 或 @import 引入的文件
插件里配的 output_dir 或 include_paths 对 --watch 模式完全无效
插件连 @use "utils" 找不到路径时都静默失败，不报错也不生成 CSS

用 SublimeOnSaveBuild + 自定义 .sublime-build 最可控

比封装过深的插件更透明、错误可见、新语法全支持，尤其对 @use、@forward 这类 Dart Sass 新特性。

先装插件：Ctrl+Shift+P → 输入 Package Control: Install Package → 搜 SublimeOnSaveBuild 安装
新建构建系统：Tools → Build System → New Build System…，贴入：

{
  "cmd": ["sass", "--no-source-map", "$file", "${file_path}/${file_base_name}.css"],
  "selector": "source.scss, source.sass",
  "file_regex": "^(*?):([0-9]+):([0-9]+)"
}