Sublime Text 本身不编译 Sass,所谓“自动编译”仅是调用系统已安装的 Dart Sass 命令行工具;必须通过 which/where 查绝对路径,显式配置 sass_path 或使用 SublimeOnSaveBuild + 自定义 .sublime-build,且项目路径不能含中文、空格或括号,否则静默失败。

Sublime Text 本身不编译 Sass,所谓“自动编译”只是调用你系统里装好的 sass 命令行工具;没装 Dart Sass、路径没对上、或项目路径含中文/空格,保存就静默失败——连错误提示都不会出现。
确认 sass 命令真能被 Sublime 调用
终端里 sass --version 能跑,不代表 Sublime 就能用。macOS/Linux 图形界面启动 Sublime 时,它不读 ~/.zshrc 或 ~/.bash_profile;Windows 上则常因 Node.js 的 npm 全局路径没进系统 PATH,或用了 nvm 切换版本后失效。
- 查真实路径:
which sass(macOS/Linux)或where sass(Windows),拿到类似/opt/homebrew/bin/sass或C:UsersYourNameAppDataRoaming pmsass.cmd - 别只信终端输出——关掉 Sublime,从 Dock / 开始菜单重启它,再试
- macOS 用 Homebrew 安装的,检查
/opt/homebrew/bin是否在$PATH;Windows 用nvm的,确保当前 Node 版本下已全局安装:nvm use 20 && npm install -g sass
用 SublimeOnSaveBuild + 自定义构建系统最稳
SCSS 插件(mrmartineau 版)自带轻量编译器,但不支持 @use,遇到直接报 Error: Invalid CSS after "@use",且错误被吞掉;LiveSassCompiler 对多层嵌套目录和 @import 解析不稳定。手动配构建系统虽多一步,但错误可见、路径可控、新语法全支持。
- 装插件:
Ctrl+Shift+P→Package Control: Install Package→ 搜SublimeOnSaveBuild - 新建构建系统:
Tools → Build System → New Build System,贴入以下内容并保存为Packages/User/Sass.sublime-build:
{
"cmd": ["sass", "--no-source-map", "$file", "${file_path}/${file_base_name}.css"],
"selector": "source.scss, source.sass",
"path": "/opt/homebrew/bin:/usr/local/bin",
"file_regex": "^(.*?):([0-9]+):([0-9]+) (.*)$"
}
-
--no-source-map必须加,否则构建容易卡住;要 sourcemap 改用--embed-sources或--sourcemap=inline -
${file_path}/${file_base_name}.css是动态输出路径,避免多个文件互相覆盖;别写死成style.css -
path字段填你查到的sass所在目录(Windows 填完整路径如C:\Users\Alice\AppData\Roaming\npm,注意双反斜杠) - 右下角状态栏必须显示
SCSS或Sass,否则构建系统压根不匹配
路径含中文或空格?直接失败
Dart Sass 在 Windows 下对含中文、空格、括号的路径处理极差,常见报错像 Error: Invalid CSS after "",实际是路径解析崩溃了,不是语法问题。
立即学习“前端免费学习笔记(深入)”;
- 项目路径必须是纯英文、无空格、无括号,例如
C:/projects/my-site/scss/main.scss可以,C:/我的项目/scss/main.scss或C:/projects/my site/scss/main.scss不行 - 如果必须用中文路径,只能改用命令行手动监听:
sass --watch src/scss:dist/css,但这就脱离 Sublime 的自动触发逻辑 - Sublime 缓存有时会干扰重写,建议明确指定输出目录,比如把
${file_path}/../dist/css/${file_base_name}.css写进构建系统的cmd
真正卡住的地方往往不是配置本身,而是 sass 命令是否真被 Sublime 看见、路径是否干净、以及你有没有意识到:Sublime 启动时根本不管你的 shell 配置文件。这些点漏一个,整个流程就静默失效。


















