必须先安装 Dart Sass CLI,否则Sublime插件无法工作;LiveSassCompiler插件更实用,支持层级输出、source map和自动监听,但需正确配置sassPath、includePaths及输出路径。

必须先装 Dart Sass CLI,否则插件全是摆设
Sublime Text 本身不带任何编译能力,所谓“一键编译”只是调用你系统里装好的 sass 命令。没装 CLI,插件点再多次也没用。
- 用 npm 装:运行
npm install -g sass(别用node-sass,它已停更) - 验证是否生效:终端执行
sass --version,输出类似1.85.2才算成功 - Windows 用户若用 nvm,请先
nvm use 20再装,否则 Sublime 找不到命令 - macOS/Linux 用户注意:图形界面启动的 Sublime 默认不读
~/.zshrc,which sass出来的路径(如/opt/homebrew/bin/sass)后面要用到
LiveSassCompiler 插件比原生 Sass 插件更实用
原生 Sass 插件只支持扁平输出、不识别嵌套结构、不兼容 @use,而 LiveSassCompiler 支持层级映射、source map、自动监听,且配置直观。
- 安装方式:命令面板
Ctrl+Shift+P→Package Control: Install Package→ 搜LiveSassCompiler - 启用监听:打开
.scss文件后保存,右下角出现Live Sass: Watch Sass,点击或按Ctrl+Alt+C - 自定义输出路径:进入
Preferences → Package Settings → LiveSassCompiler → Settings,在用户设置里加:
{
"live_sass_compiler.settings.formats": [
{
"format": "expanded",
"extension": ".css",
"savePath": "/dist/css/"
}
],
"live_sass_compiler.settings.save_generated_files": true
}
这样 src/scss/layout/header.scss 就会输出到 dist/css/layout/header.css,结构保留。
Sublime 找不到 sass 命令?不是插件问题,是 PATH 没继承
终端能跑 sass -v ≠ Sublime 能调用它。这是 macOS/Linux 图形启动和 Windows nvm 环境下的高频故障点。
- 先查真实路径:
which sass(macOS/Linux)或where sass(Windows),得到类似/usr/local/bin/sass或C:\Users\Me\AppData\Roaming\npm\sass.cmd - 进
Preferences → Package Settings → LiveSassCompiler → Settings,用户设置中加:
"live_sass_compiler.settings.sassPath": "/usr/local/bin/sass"
注意:填的是可执行文件路径,不是 sass --watch 这种命令串;Windows 上务必带 .cmd 后缀。
变量文件改了不生效?因为插件不自动解析 @import/@use
修改 _variables.scss 后保存主文件却报 undefined variable,这不是编译失败,是 Sublime 插件根本没加载那个文件——它只编译当前打开的 .scss,不 resolve 依赖链。
- 确保主文件里有显式引用:
@use "variables" as *或@import "variables" - 如果变量文件不在同一目录,需在 LiveSassCompiler 设置里加
"includePaths":
"live_sass_compiler.settings.includePaths": ["src/scss"]
路径是相对于项目根目录的,不是相对于当前文件;@use 规则要求路径必须准确,不能省略 .scss 后缀(除非是默认入口)。
真正麻烦的地方在于:没有全局 watcher,每个文件得手动触发监听;一旦项目结构复杂、依赖多层,就得靠 build system + sass --watch 配合外部终端来兜底。


















