easy less 插件已停更多年,在 vscode v1.80+ 中常静默失效;推荐用官方 lessc cli 配合 tasks.json 实现稳定监听,支持 --include-path 解决 @import 路径问题,并需确保 lessc ≥4.2.0、文件非下划线开头、启用自动保存。

Easy LESS 插件在 VSCode 中已停止维护多年,2026 年最新版(v1.80+)下极易出现「保存无反应」「CSS 不生成」「下划线文件(如 _variables.less)被跳过」等问题——这不是你配置错了,而是插件进程根本没启动。
别花时间调 less.compile 配置项了,直接换更稳定、可调试、路径可控的方案:用官方 lessc CLI + tasks.json。
为什么 Easy LESS 会静默失效
插件依赖 Node.js 环境和全局 lessc 命令,但新版 VSCode 的文件监视器默认节流,且 Easy LESS 不处理 --include-path,遇到多层 @import 或别名路径(如 @import "base/typo")直接报 File not found。更隐蔽的是:它对文件名带下划线的 partial 文件(_mixins.less)默认不编译,也不提示,看起来就像“没反应”。
用 lessc + tasks.json 实现可靠监听
先确保 lessc --version 能返回版本号(推荐 npm install -g less)。然后在项目根目录创建 .vscode/tasks.json,内容如下:
{
"version": "2.0.0",
"tasks": [
{
"label": "less:watch",
"type": "shell",
"command": "lessc",
"args": [
"--watch",
"--source-map",
"--include-path=${fileDirname}",
"${file}",
"${fileDirname}/${fileBasenameNoExtension}.css"
],
"isBackground": true,
"problemMatcher": [],
"group": "build",
"presentation": {
"panel": "shared"
}
}
]
}
-
--include-path=${fileDirname}是关键:让@import相对当前文件路径解析,避免跨目录报错 -
${file}和${fileBasenameNoExtension}.css必须动态,不能写死路径(比如src/less/main.less:dist/css/main.css) -
"isBackground": true缺失会导致任务执行完就退出,无法持续监听 -
problemMatcher: []避免因匹配规则太严而掩盖真实错误(比如语法错只在终端输出,不弹窗)
Windows 下路径分隔符必须统一用正斜杠
如果你在 out 路径里写了 \css\ 或 c:\project\css\,lessc 会静默失败或生成空文件。所有路径一律用正斜杠:/css/ 或 /dist/css/。VSCode 的变量(如 ${fileDirname})在 Windows 上返回的也是正斜杠路径,无需转义。
启动监听后仍不生效?检查三个硬性前提
— lessc 必须全局可用,且版本 ≥ 4.2.0(旧版不支持 --watch)
— 当前打开的文件是 .less 后缀,且不是以下划线开头的 partial(_xxx.less)——这类文件本就不该单独编译,应由主入口 @import 引入
— VSCode 设置中「文件 → 自动保存」已启用,否则 --watch 检测不到变更
lessc --watch 只监听单个输入文件及其直接 @import 链,不会递归监听整个 less/ 目录。如果修改的是 _mixins.less 这类被多个文件引用的 partial,必须手动保存一次它的使用者(比如 main.less)才能触发重编译——这点容易被忽略。











