Sublime Text 本身并不能直接编译 Sass，这一点得先说清楚。

市面上所谓的“安装 Sass 插件”，本质上只是给编辑器加了个语法高亮，顺便提供一个调用外部 sass 命令的入口。

换句话说，如果系统里没装好 Dart Sass，插件装得再多，.scss 文件也变不成 .css。

装对编译器：Dart Sass 才是对的，Node Sass 和 Ruby Sass 都得靠边站

这一步是绝大多数人卡住的地方。Sublime 不会替你装编译器，它只负责调用命令。

如果你在终端里敲 sass --version，结果报错说 command not found: sass，那后续所有插件配置都是白忙活。

正确安装方式

装 Dart Sass 得走 npm 这条官方路：npm install -g sass。

同时要确保 Node.js 版本在 18.0 以上。

需要注意的是，node-sass 已经停更多年，ruby sass 也早已废弃，千万别去碰它们。

macOS 用户如果之前用 Homebrew 装过旧版的 Ruby Sass，记得先卸掉（brew uninstall sass），再走 npm 方式。

Windows 用户要注意 PATH

Windows 用户要格外留意：npm 全局 bin 路径（类似 C:UsersXXXAppDataRoamingnpm）必须添加到系统环境变量 PATH 里。

否则 Sublime 启动时根本找不到 sass.cmd。

验证方法很简单：开一个全新的终端窗口，不是 Sublime 的内置控制台，执行 sass --version。

正常会输出类似 1.77.6 的版本号。

选对插件：LiveSassCompiler 或 SublimeOnSa veBuild，别选 Sass Build

老牌的 Sass Build 插件现在已经基本跑不动了。

因为它依赖的是早已下线的 Ruby Sass，开启后只会报 DEPRECATION WARNING 或者直接编译失败。

真正靠谱的方案有两个：

• LiveSassCompiler：开箱即用，右下角点一下 Live Sass: Watch Sass 或者按 Ctrl+Alt+C 就能启动监听，自动编译出同目录下的 .css 文件。
• SublimeOnSa veBuild：更轻量，适合需要自定义编译参数的用户。安装后进入 Preferences → Package Settings → SublimeOnSa veBuild → Settings，填入类似这样的配置：

{
  "extensions": ["scss", "sass"],
  "exec_cmd": ["sass", "--no-source-map", "--style=compressed", "$file", "$file_path/$file_base_name.css"]
}

另外，别指望装个 SCSS 插件就能编译。

它只负责语法高亮和代码检查，不带构建逻辑。

路径问题：Sublime 默认不继承 Shell 的 PATH

你在 iTerm 或者 PowerShell 里能跑 sass --version，不代表 Sublime 也能。

因为 Sublime 是图形界面启动的，它看不到你 ~/.zshrc 或者 PATH 环境变量里配置的路径。

不少人在这一步栽过跟头。

解决方法

解决方案是手动指定绝对路径。

先用终端查一下真实路径：macOS/Linux 执行 which sass，Windows 执行 where sass。

你会得到类似 /usr/local/bin/sass 或 C:UsersMeAppDataRoamingnpmsass.cmd 的结果。

• 如果用 LiveSassCompiler，打开 Preferences → Package Settings → LiveSassCompiler → Settings，加一行："sassPath": "/usr/local/bin/sass"（注意替换成你查到的实际路径）。
• 如果用 SublimeOnSa veBuild，它的 exec_cmd 是直接通过 exec 调用，不走 shell，所以必须写绝对路径，不能只写 "sass"。

编译结果总跑错目录？output_dir 不等于“自动映射项目结构”

多数插件的 output_dir 配置，逻辑是“统一输出到某个固定路径”，而不是保留源文件的目录层级。

举个例子，如果你设成 "dist/css"，那么 src/scss/a.scss 编译后变成 dist/css/a.css，而不是 dist/css/scss/a.css。

它不会自动还原嵌套结构。

保留目录层级时该怎么做

如果你希望保留嵌套层级，比如 src/scss/components/button.scss → dist/css/components/button.css，那通用插件基本满足不了。

这时最好放弃插件方案，改用自定义 build system 配合 sass --watch 独立进程。

• LiveSassCompiler 虽然支持 sa vePath 配置，但它只能写相对当前文件的路径，比如 "sa vePath": "../css/"，无法动态解析子目录。
• 如果项目中用了 @use 或 @import 引入变量文件，记得确保这些文件在 sass 命令的可访问路径下。插件不会自动加载 node_modules 里的包，需要手动加 --load-path=node_modules 到 exec_cmd 中。

结论

说到底，真正麻烦的从来不是插件怎么装。

而是 Sublime 启动时拿不到 shell 里配好的环境变量，加上插件对 @use 和嵌套目录的支持远不如命令行 sass --watch 来得可靠。

对于复杂项目，直接在终端跑 sass --watch src/scss:dist/css 反而更省心，Sublime 只管写代码就行。