如何设置Sublime Text以编译SCSS为CSS，并安装Sass插件及编译器？

本文共计1170个文字，预计阅读时间需要5分钟。

Sublime Text 本身不编译 SCSS，所谓的配置编译实际上是指调用已安装的 `sass` 命令行工具。通过插件或构建系统，将保存动作映射为一次编译命令。关键不在插件选择的多花哨，而在于 `sass` 是否被 Sublime 正确识别、是否支持当前语法、以及输出路径是否正确设置。

确认 sass 命令可用且版本正确

这是整个流程的前提，90% 的失败卡在这一步。

• 终端运行 sass --version，必须输出类似 1.77.6 的 Dart Sass 版本号；低于 1.23.0 可能不支持 @use 等新语法
• 如果报 command not found，说明 Node.js 没装、或没全局安装：npm install -g sass（不是局部安装）
• macOS 用户注意：GUI 启动的 Sublime 默认不读 shell 的 PATH，可尝试从终端启动：subl；或在构建系统中显式加 "path": "/opt/homebrew/bin:/usr/local/bin"
• Windows 用户检查 C:\Users\XXX\AppData\Roaming\npm 是否已加入系统环境变量 PATH

别装错插件：SCSS ≠ Sass

Package Control 里搜 “Sass” 会出现两个高权重插件，名字只差一个字母，但功能天壤之别。

• Sass（无后缀 C）：纯语法高亮插件，右下角显示 “Sass”，但保存文件完全不编译——很多人装完以为搞定了，其实只是有了颜色
• SCSS（带 C）：由 mrmartineau 维护，轻量、兼容 Dart Sass，会自动注册构建系统，菜单栏 Tools → Build System 里会出现 “SCSS” 选项
• 另一个稳妥选择是 Easy SCSS：自带简易编译逻辑，不依赖外部 sass（但默认仍优先调用它），右键可直接启用 Easy SCSS: Toggle Auto Compile

构建系统必须匹配文件类型和路径变量

哪怕 sass 装对了、插件也装对了，构建系统配错照样静默失败——没有报错弹窗，只有 CSS 不生成。

立即学习“前端免费学习笔记（深入）”；

• 确保当前文件右下角状态栏显示的是 SCSS（不是 Plain Text 或 Sass），否则 selector 匹配不上，构建不会触发
• 推荐最小可用构建配置（保存为 SCSS.sublime-build）：

  { "cmd": ["sass", "--update", "$file", "$file_path/$file_base_name.css"], "selector": "source.scss", "file_regex": "^(.*?):([0-9]+):([0-9]+) (.*)$" }

• $file_path/$file_base_name.css 是关键：漏掉 $file_path/，CSS 会生成到 Sublime 安装目录下；写成 ./css/$file_base_name.css 则可能因相对路径解析失败而报 File to read not found
• 不要在构建里硬塞 --watch：它会阻塞 Sublime 主进程，应另开终端跑 sass --watch src/scss/:dist/css/

常见错误现象与直击点

很多问题表面是插件或配置问题，实际是 Dart Sass 解析规则变了，老写法直接报错。

• Invalid CSS after "@use": expected "{", was ";"：说明用了旧版构建模板或插件绑定了 node-sass；Dart Sass 要求 @use "foo" 后不能加分号，且必须有引号
• 保存后无反应，控制台（Ctrl+`）也没输出：大概率是构建系统没被选中，或文件后缀不是 .scss（比如误存为 .sass.txt）
• CSS 生成了但内容为空：检查 SCSS 文件里是否有 @use 或 @import 的路径错误，Dart Sass 不会自动 resolve 未声明的依赖文件
• 想输出到 dist/css/ 目录却总在根目录生成：不要改 output_dir 设置（原生 SCSS 插件不认这个），直接改构建里的输出路径为 "$file_path/../dist/css/$file_base_name.css"

真正卡住的往往不是“怎么点设置”，而是 sass 命令本身是否被 Sublime 正确加载、SCSS 语法是否符合 Dart Sass 当前规范、路径变量是否被真实展开——这些细节比插件名字重要得多。