Sublime Text 需借助 SublimeOnSaveBuild 插件与全局 Dart Sass 实现保存即编译：先 npm install -g sass，再配置 Sass.sublime-build 调用 sass 命令，最后启用插件的 build_on_save 选项。
Sublime Text 里没有原生的“保存即编译 Sass/SCSS”功能
Sublime Text 本身不带构建系统或文件监听能力，所谓“自动编译”必须依赖第三方插件 + 外部工具（如 sass CLI 或 node-sass）。直接装个插件就一劳永逸的想法容易踩坑——比如插件已弃用、不支持新版 SCSS 语法、或根本没调用你本地装的 sass 命令。
推荐方案：用 SublimeOnSaveBuild + 系统级 sass CLI
这是目前最轻量、可控性最强的方式。核心逻辑是：保存时触发一次构建命令，调用你本机安装的 sass 命令把当前 .scss 文件编译为 CSS。
- 先全局安装 Dart Sass（官方推荐，取代已停更的
node-sass）：npm install -g sass
- 在 Sublime 中安装插件：
Package Control → Install Package → SublimeOnSaveBuild - 新建构建系统：
Tools → Build System → New Build System，填入以下内容并保存为Sass.sublime-build：{ "cmd": ["sass", "--style=compressed", "$file", "$file_path/$file_base_name.css"], "selector": "source.scss, source.sass", "shell": true, "working_dir": "$file_path" } - 回到文件，按
Cmd+B（macOS）或Ctrl+B（Windows/Linux）测试是否能手动编译成功；若报错command not found: sass，说明 Sublime 找不到全局sass，需在构建系统中写绝对路径（如/usr/local/bin/sass或C:\Users\xxx\AppData\Roaming\npm\sass.cmd） - 启用保存即构建：
Preferences → Package Settings → SublimeOnSaveBuild → Settings，修改为：{ "filename_filter": "\.(scss|sass)$", "build_on_save": true }
为什么不用 SCSS 插件或 Easy SCSS？
这些插件大多内置了过时的 Ruby Sass 或硬编码的 node-sass 路径，2023 年后基本失效。典型症状包括：
- 保存后无反应，控制台报错
TypeError: Cannot read property 'apply' of undefined - 生成的 CSS 文件为空或含 Sass 错误但不提示
- 不支持
@use/@forward等新语法（Dart Sass 才支持） - 无法自定义输出路径、压缩等级、source map 开关
进阶注意：watch 模式不适合 Sublime 的保存即编译场景
有人会想用 sass --watch 长期监听，但这和 Sublime 的 on_save 机制冲突：watch 进程常驻，Sublime 保存时又起一个新进程，容易导致重复编译、文件锁死或 CSS 覆盖混乱。真要监听整个目录，请改用独立终端运行：
立即学习“前端免费学习笔记（深入）”；
sass --watch src/scss/main.scss:dist/css/main.css --style=compressed
此时应关闭 Sublime 的 SublimeOnSaveBuild，避免双重触发。
真正卡住人的往往不是配置步骤，而是没验证 sass 是否真在 PATH 里、或用了旧版插件却以为是自己配置错了。
