sublime text 本身不编译 sass，所有“自动编译”均依赖系统已安装的 dart sass 命令行工具；必须通过 sass --version 验证可用性，手动配置 sass_path 或自定义构建系统，并确保路径无中文/空格，否则静默失败。
Sublime Text 本身不编译 Sass，所谓“自动编译”全是调用你系统里装的 sass 命令行工具；没装 Dart Sass、PATH 没通、或路径含中文/空格，保存文件就静默失败——连错误提示都不会弹。
确认 sass 命令真能被 Sublime 调用
终端里跑 sass --version 成功，不代表 Sublime 就能用。macOS/Linux 图形界面启动 Sublime 时，它压根不读你的 ~/.zshrc 或 ~/.bash_profile；Windows 上则常因 Node.js 的 npm 全局路径没加进系统 PATH，或用了 nvm 切换版本后失效。
- 先查真实路径：
which sass（macOS/Linux）或where sass（Windows），拿到类似/opt/homebrew/bin/sass或C:\Users\YourName\AppData\Roaming\npm\sass.cmd这样的绝对路径 - 打开 Sublime → Preferences → Package Settings → Sass → Settings（注意：是 Sass 插件的设置，不是 Sublime 自身设置）
- 在右侧用户设置中写入：
"sass_path": "/opt/homebrew/bin/sass"（替换成你查到的路径） - 保存后重启 Sublime，再试编译
用 SublimeOnSaveBuild + 自定义构建系统最稳
SCSS 插件轻量但已跟不上 Dart Sass 更新节奏，遇到 @use 直接报 Error: Invalid CSS after "@use"；LiveSassCompiler 看似方便，但对多层嵌套目录、@import 路径解析不稳定，且错误常被吞掉。
- 装插件：
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 改用--embed-sources -
${file_path}/${file_base_name}.css动态生成同名 CSS，避免多个文件互相覆盖 -
file_regex必须匹配 Dart Sass 报错格式（如button.scss:12:5 Undefined variable "$color-primary"），否则错误不会显示在面板里
路径含中文或空格？直接报错或静默失败
Dart Sass 在 Windows 下对含中文、空格、括号的路径处理极差，常见报错像 Error: Invalid CSS after ""，实际根本没读到文件。macOS/Linux 虽稍好，但 Homebrew 安装路径若含空格（如 /Applications/Sublime Text.app 启动时继承的环境）也可能触发异常。
- 把项目移到纯英文无空格路径下，例如
C:/project（Windows）或~/dev/myapp（macOS/Linux） - 检查
$file变量是否被正确展开：在构建系统里临时加"shell": true并把cmd改成["echo", "$file"]，看输出是否含乱码或截断 - 如果项目必须放桌面或带中文名，改用绝对路径写死
working_dir，并在cmd中用完整路径调用sass
为什么改了变量、@import 了文件，CSS 就不更新？
绝大多数插件（包括 SCSS、LiveSassCompiler）默认只编译当前打开的文件，不会主动 resolve @use 或 @import 的依赖链。它不是“监听整个项目”，而是“只管你正在保存的那个 .scss 文件”。
- 确保主入口文件（如
main.scss）开头有@use "variables"或@import "variables"，且variables.scss和它在同一目录或符合include_paths配置 - 不要指望插件自动感知你改了
_mixins.scss就重编所有引用它的文件——除非你手动保存每个依赖项，或改用sass --watch命令行方式 - 想真正监听整个目录，别依赖插件：终端进项目根目录，运行
sass --watch src/scss/:dist/css/，让 Dart Sass 自己管依赖和增量编译
最易被忽略的一点：Sublime 启动方式决定它能看到哪些环境变量。从 Dock 或开始菜单点开的 Sublime，和从终端执行 subl 启动的，PATH 完全不同。调试时优先用终端启动，确认可行后再解决图形界面环境继承问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
