sublime如何启用“保存时自动编译Sass/SCSS”？（前端构建集成）

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 里、或用了旧版插件却以为是自己配置错了。