Sublime怎么安装Less/Sass插件？Sublime实现CSS预处理编译教程

Sublime Text 需依赖外部 CLI 工具（lessc 或 Dart Sass）编译 Less/Sass，插件仅提供语法高亮与构建入口；须先全局安装对应工具、正确配置构建系统路径，并推荐用命令行 watch 实时编译。

先说一个核心事实：Sublime Text 本身并不具备编译 Less 或 Sass 的能力。你安装的那些所谓“插件”，本质上只是提供了语法高亮和一个命令触发按钮。真正把 .less 或 .sass 文件变成 .css 的“脏活累活”，还得靠外部的命令行工具。如果没装对，保存文件后自然不会有任何 .css 生成。

确认系统已安装 Node.js 和 less/sass CLI

这是最容易“翻车”的一步。很多人以为装了插件就万事大吉，结果一点编译就弹出 'lessc' is not recognized 之类的错误。原因很简单：插件只是个“传令兵”，它需要调用系统里实实在在的 lessc 或 sass 命令。所以，第一步必须确保命令行工具就位：

• 安装 Less：运行 npm install -g less，装完后用 lessc --version 验证一下。
• 安装 Sass：现在推荐 Dart Sass，运行 npm install -g sass 即可。注意，那个老旧的 node-sass 已经过时了，别再用了。
• 给 Windows 用户提个醒：如果你用 PowerShell 启动 Sublime，可能需要先在终端里执行 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser，否则全局 npm 命令可能无法运行。

用 Package Control 安装 Syntax + Build System 插件

别在插件市场里瞎搜“Less 插件”这种模糊词。你需要的是两样东西：一是让文件正确着色的语法高亮，二是能触发编译的构建系统。

• 对于 Less，推荐安装 LESS（作者 mrh85）。这个插件自带构建规则，省去了手动配置的麻烦。
• 对于 Sass，情况稍复杂。推荐安装 Sass（作者 aaronjorbin）来获得语法高亮，但它的构建系统通常需要单独配置。
• 安装完成后，重启 Sublime。打开一个 .less 文件，按 Ctrl+Shift+P 调出命令面板，输入 Set Syntax: LESS，确认语法高亮已经生效。

配置 Build System 让 Ctrl+B 真正编译出 CSS

默认的 LESS 插件虽然会尝试调用 lessc，但常常因为系统路径问题而失败。最稳妥的办法，是手动创建一个构建配置文件，把路径写死。

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

{
  "cmd": ["lessc", "$file", "$file_path/$file_base.css"],
  "path": "/usr/local/bin:/opt/homebrew/bin",
  "selector": "source.less",
  "shell": true
}

Windows 用户需要把 path 改成类似 C:\Users\YourName\AppData\Roaming\npm 这样的路径（具体可以用 npm config get prefix 命令查看）。另外，把 shell 设为 true 是为了让 Windows 系统能正确识别 lessc 命令。

• 将上述配置保存为 Lessc.sublime-build，放到 Packages/User/ 目录下。
• 之后，按 Ctrl+Shift+P，输入 Build With…，选择你刚创建的 Lessc，再按 Ctrl+B 就能生成同名的 .css 文件了。
• 注意一个细节：Dart Sass 默认可能不支持旧的缩进语法（.sass 文件），如果需要，构建命令可以写成：sass --style=expanded --no-source-map "$file" "$file_path/$file_base.css"。

监听文件变化自动编译？别依赖 Sublime 插件

想实现保存即编译？市面上那些为 Sublime 开发的监听插件，比如 less-watch-compiler

• 对于 Less：lessc --watch input.less output.css
• 对于 Sass：sass --watch input.scss:output.css