sublime text 本身不编译 sass，所谓“自动编译”全靠外部 sass 命令 + 插件触发实现；需先确认终端中 sass --version 可用且 sublime 能读取其路径（如 /opt/homebrew/bin/sass），再配 sublimeonsavebuild 与自定义构建系统，避免使用不支持 @use 的 scss 插件，并确保项目路径无中文或空格。
Sublime Text 本身不编译 Sass，所谓“自动编译”全是靠外部 sass 命令 + 插件触发实现的；没装好 Dart Sass 或 PATH 没通，再配十遍构建系统也没用。
确认 sass 命令是否真可用
这是 90% 编译失败的根源。Sublime 启动时读的是自己的环境变量，不是你终端里能跑 sass --version 就算完事。
- 在终端执行
which sass（macOS/Linux）或where sass（Windows），拿到绝对路径，例如/opt/homebrew/bin/sass或C:\Users\Me\AppData\Roaming\npm\sass.cmd - 别只信终端里
sass --version有输出——关掉 Sublime，重新从 Dock / 开始菜单启动它，再测试 - macOS 上若用 Homebrew 安装，检查
~/.homebrew/bin是否在$PATH；Windows 上若用 nvm，确保当前 Node 版本下已全局安装：nvm use 20 && npm install -g sass
用 SublimeOnSaveBuild + sass CLI 实现稳定自动编译
这是目前最可控、兼容性最好的组合，不依赖插件内置编译器，能完整支持 @use、@forward 等新特性。
- 先装插件：
Ctrl+Shift+P→ 输入Package Control: Install Package→ 搜SublimeOnSaveBuild安装 - 新建构建系统：
Tools → Build System → New Build System…，贴入以下内容并保存为Sass.sublime-build：
{
"cmd": ["sass", "--no-source-map", "$file", "${file_path}/${file_base_name}.css"],
"selector": "source.scss, source.sass",
"file_regex": "^(*?):([0-9]+):([0-9]+)"
}
-
--no-source-map必须加，否则构建可能卡住；如需 sourcemap，改用--sourcemap=inline或--sourcemap=external -
${file_path}/${file_base_name}.css是动态输出路径，避免多文件互相覆盖；别写死成style.css - 确保
selector是source.scss, source.sass，否则保存时不会触发
别踩进 SCSS 插件的坑
名字叫 SCSS（作者 mrmartineau）的插件自带轻量编译器，看似免配置，但实际限制极多。
- 不支持
@use，遇到就报Invalid CSS after "@use"，且错误不显示在控制台，只弹空框 - 编译失败时静默不生成
.css，看起来像“没反应”，排查无从下手 - 输出路径固定，不能自定义目录结构，所有 CSS 都扔进同级目录
- 它和
Sass（语法高亮插件，作者 mrmlnc）是两个东西，装错一个就白忙活
路径含中文或空格会导致编译静默失败
这是最容易被忽略的硬伤。Dart Sass 对非 ASCII 字符路径支持不稳定，尤其在 Windows 和某些 macOS shell 环境下。
- 把项目移到纯英文路径下测试，比如
/Users/me/project/或C:\dev\myapp\ - 检查
@import语句里的路径是否也全是英文，比如@import "base/variables";而不是@import "基础/变量"; - 如果必须用中文路径，改用
LiveSassCompiler插件，它对路径容错稍强，但依然建议优先规避
真正卡住的点往往不在配置本身，而在 Sublime 是否真的“看见”了 sass 命令，以及路径里有没有那个看不见的空格或中文字符——查控制台（Ctrl+`）看有没有 command not found 或 ENOENT，比反复重配构建系统更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
