Sublime如何配置Sass/Less自动编译_Sublime前端预处理设置【全攻略】

sublime text 需通过插件配合外部编译器（如 sass、lessc）实现 sass/less 自动编译，因其无内置运行时环境，必须手动配置构建系统调用命令；sublimelinter 等仅校验语法，不生成 css。

sublime text 本身不支持 Sass/Less 自动编译，必须通过插件 + 外部编译器（如 sass、lessc）协同实现；直接装个插件就“开箱即用”是常见误解。

为什么 SublimeLinter 或 Emmet 不能编译 Sass？

这些插件只负责语法高亮、代码补全或校验，不调用编译器。真正生成 .css 文件需要执行 sass 命令（Dart Sass）或 lessc 命令。Sublime 没有内置运行时环境，必须显式配置构建系统（Build System）来调起终端命令。

• SublimeLinter-sass 只检查语法错误，不输出 CSS
• 没装 sass CLI（npm install -g sass）或 lessc（npm install -g less），插件会报 command not found
• windows 用户若用 git bash 或 PowerShell 而非 cmd，默认构建系统可能找不到全局 npm bin 路径

配置 Build System：Sass（Dart Sass）最简可用方案

新建 Tools → Build System → New Build System，粘贴以下内容并保存为 Sass.sublime-build（路径通常是 Packages/User/）：

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

• $file 是当前 .scss/.sass 文件，${file_path}/${file_base_name}.css 是输出路径（和源文件同目录）
• --style=expanded 避免压缩后难调试；生产可用 --style=compressed
• Windows 必须用 sass.cmd，否则找不到命令（npm 全局安装的可执行文件在 Windows 下是 .cmd 包装器）
• 首次运行会卡住——这是正常行为，--watch 启动了监听进程，状态栏显示 Building... 即表示已生效

Less 编译要绕开 less-watch-compiler 的坑

官方 lessc 不支持原生 --watch（v4+ 已移除），强行用 lessc --watch 会报错 Unknown option '--watch'。必须换工具：

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

• 推荐用 less-watch-compiler：npm install -g less-watch-compiler
• Build System 中 cmd 改为：["less-watch-compiler", "--on-change", "echo compiled", "--output", "${file_path}", "${file}"]
• 注意它默认监听整个目录，不是单文件；想精确控制，加 --include 参数指定 .less 文件
• 如果改了变量文件（如 _vars.less）但主入口没变动，它可能不触发重编——这是它的设计限制，不是配置错

真正的难点不在配置路径，而在理解「谁负责监听、谁负责执行、谁决定输出位置」。三个角色（Sublime 构建系统、Node CLI 工具、项目目录结构）稍有错位，就会静默失败——比如输出 CSS 被写到上级目录，浏览器却引用了旧文件，你根本看不出编译发生了什么。