Sublime Text 找不到 sass 命令的根本原因是未继承 shell 的 PATH,解决方法是通过插件设置或自定义 Build System 显式指定 sass 可执行文件的绝对路径,并注意 JSON 格式、Dart Sass 与 Ruby Sass 区分、include_paths 配置及 @use 路径解析规则。

Sublime Text 找不到 sass 命令,根本原因是没继承 shell 的 PATH
你在终端里能跑 sass --version,但 Sublime 保存 .scss 文件时却报 command not found: sass——这不是插件问题,是 Sublime 启动时压根没拿到你 shell 配置的环境变量。macOS/Linux 图形界面下尤其常见;Windows 上则多因 Node.js 装在用户目录(比如 C:\Users\Me\AppData\Roaming\npm\sass.cmd),而系统 PATH 没包含它,或用了 nvm 切换版本后路径失效。
解决办法只有一个:不依赖 PATH,直接告诉 Sublime sass 在哪。
- 先在终端运行
which sass(macOS/Linux)或where sass(Windows),拿到绝对路径,例如:/opt/homebrew/bin/sass或C:\Users\Me\AppData\Roaming\npm\sass.cmd - 打开 Sublime → Preferences → Package Settings → Sass → Settings(如果是 Less,就选 Less → Settings)
- 在右侧用户设置里写入:
"sass_path": "/opt/homebrew/bin/sass"(注意只填可执行文件路径,别带参数) - 保存后重启 Sublime,再试保存 .scss 文件
用自定义 Build System 调试 sass 运行路径更直观
比起插件配置,Build System 是最可控、也最容易看到错误输出的方式。它强制你显式写出命令和路径,出错时控制台会直接打印 stderr,比如 Cannot find module 'sass' 或 Permission denied,比插件静默失败好排多了。
操作步骤:
- 菜单栏 → Tools → Build System → New Build System…
- 粘贴以下内容(适配 Dart Sass,支持 source map 和压缩):
{ "cmd": ["sass", "--sourcemap", "$file:$file_path/../dist/css/${file_base_name}.css"], "selector": "source.scss", "shell": true, "working_dir": "$file_path" } - 保存为
Sass-debug.sublime-build,放在Packages/User/目录下 - 打开一个 .scss 文件,选中这个构建系统,按
Ctrl+B(Windows/Linux)或Cmd+B(Mac)
如果报错,控制台(Ctrl+`)里会显示完整命令执行过程。重点看两处:sh: sass: command not found 说明路径不对;Error: Can't find stylesheet to import 说明 @use 或 @import 路径解析失败,跟 include_paths 有关。
sass_path 配错或没生效的三个典型表现
即使你填了 sass_path,也可能因为几个细节被忽略而白配:
-
sass_path值末尾多了一个空格,或用了中文引号(“”),JSON 解析失败,设置根本不加载 - 你装的是 Dart Sass,但路径指向了旧版 Ruby Sass(比如
/usr/local/bin/sass),而 Ruby Sass 已弃用,不支持@use,编译会卡在变量未定义 - macOS 上用 Homebrew 安装 Dart Sass,路径可能是
/opt/homebrew/bin/sass(Apple Silicon)或/usr/local/bin/sass(Intel),which sass必须在图形界面终端里运行,否则可能返回错误路径
验证是否生效:打开 Sublime 控制台(Ctrl+`),输入 view.window().run_command("sass_build")(假设你用的是 Sass 插件),如果报 AttributeError 或 KeyError,说明插件根本没读到你的 sass_path 设置。
调试时别忽略 include_paths 和 @use 路径解析逻辑
就算 sass 命令能跑,改了 _variables.scss 后保存主文件仍报 undefined variable,大概率不是路径问题,而是模块导入没对上。
Dart Sass 的 @use 默认只认当前文件所在目录及其子目录。如果你的结构是 src/scss/main.scss 引用了 src/scss/base/_variables.scss,那没问题;但若引用的是 src/scss/_variables.scss(同级),就得配 include_paths。
- 在 Build System 的
cmd里加参数:"sass", "--load-path=src/scss", "$file:..." - LiveSassCompiler 用户可在设置里加:
"live_sass_compiler.settings.includePaths": ["src/scss"] - 注意:
@use "base/variables"中的路径是相对include_paths的,不是相对当前文件
真正容易被忽略的是:Dart Sass 不支持从 node_modules 直接 @use "bootstrap",除非你明确加了 --load-path=node_modules,且 bootstrap 是以 Sass 模块方式发布的(不是老式 CSS 导入)。这点和 Webpack 的 resolve.alias 完全不同,不能套用经验。


















