Sublime Text 本身不编译 SCSS，所谓“实时转 CSS”本质是调用外部 sass 命令行工具 + 插件触发机制；没装对 sass 或路径没对上，保存就静默失败。
Sublime Text 本身不编译 SCSS，所谓“实时转 CSS”本质是调用外部 sass 命令行工具 + 插件触发机制；没装对 sass 或路径没对上，保存就静默失败，连错误都不报。
确认 sass 已全局安装且可执行
这是 90% 编译失败的根源。插件只是喊一声“sass，干活！”，如果系统根本听不见，就卡住不动。
- 终端运行
sass --version，必须输出类似1.77.6；没反应？说明没装或没进 PATH - 务必用
npm install -g sass（别用node-sass，已废弃，不支持@use） - macOS 用户若从 Dock 启动 Sublime，常因 GUI 环境没加载 shell PATH，导致找不到
sass；解决办法：终端里运行subl启动编辑器 - Windows 用户查
sass实际路径：npm config get prefix，再拼上\sass.cmd（例如C:\Users\Alice\AppData\Roaming\npm\sass.cmd）
用 SublimeOnSaveBuild + 自定义构建系统最稳
比 LiveSassCompiler、SCSS 插件更透明、出错能直接看到原始 sass 报错，适合真要调试语法或路径问题的人。
- Package Control 安装
SublimeOnSaveBuild - 菜单 → Tools → Build System → New Build System…，贴入：
{
"cmd": ["sass", "--no-source-map", "$file", "$file_path/$file_base_name.css"],
"selector": "source.scss",
"path": "/usr/local/bin:/opt/homebrew/bin",
"shell": true
}
-
path值按你本地sass路径填（macOS 用which sass查；Windows 填上面查到的完整目录） -
$file_base_name.css是关键：保证每个.scss输出独立.css，不会互相覆盖 - 保存为
Sass.sublime-build到Packages/User/目录，然后右下角状态栏手动选中它
为什么保存后没生成 CSS？先盯这几个点
不是插件坏了，大概率是文件没被识别、路径错了，或者语法越界了。
- 右下角状态栏必须显示
SCSS（不是CSS或空白），否则selector不匹配，构建系统压根不触发 - 文件必须已保存（不能是未命名的临时标签页），否则
$file解析为空，报File to read not found - 遇到
Invalid CSS after "@use"：Dart Sass 要求@use后必须跟{，不能分号结尾；也确认你没把_partial.scss当入口文件——带下划线的不会被编译 - 输出路径含中文或空格？某些旧插件会崩；移到
C:/dev/或~/code/这类干净路径下试试
别信“全自动实时监听”，真 --watch 交给终端
Sublime 插件模拟的 watch 可靠性差，容易漏触发、卡死、不报错。开发时建议另开终端，cd 到项目目录，直接跑：
sass --watch src/style.scss:dist/style.css --style=compressed
- 这样能第一时间看到编译错误（比如变量未定义、路径错）、热重载也更准
- Sublime 只负责写代码，终端负责编译，职责清晰，排查问题时不用猜“是插件没起作用，还是 sass 没跑起来”
- 如果非要 Sublime 内集成，
SublimeOnSaveBuild配合手动Ctrl+B比任何“自动监听”都可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
