现代 Less(≥3.0)已移除 @plugin 指令,插件须通过 plugins 数组显式传入;Visitor 插件需返回新节点且类型严格匹配 AST;自定义函数必须返回 Less 内部节点类型。

现代 Less(≥3.0,尤其 4.0+)不支持 @plugin 指令,直接写它必然报 Unknown rule: @plugin 错误——这不是路径或语法问题,是该语法已被彻底移除。
Less 插件必须显式传入 plugins 数组
插件不是“声明即生效”,而是编译时注入的逻辑模块。所有插件都得在调用 less.render()、less.parse() 或构建工具配置中,通过 plugins 选项显式传入一个数组。
- Node.js 环境:
const myPlugin = require('./my-plugin.js');,然后less.render(css, { plugins: [myPlugin] }) - CLI:
lessc --plugin=./my-plugin.js input.less,注意路径是相对于当前工作目录,不是 .less 文件位置 - Webpack +
less-loader:options.plugins = [require('./my-plugin.js')],且插件文件必须是 CommonJS 格式(module.exports = { install() { ... } }) - 浏览器环境:必须在
less.min.js加载前定义window.less = { plugins: [myPlugin] },否则less.plugins是undefined
Visitor 插件修改 AST 必须返回新节点,不能原地赋值
Visitor 是最常用的扩展方式,适合遍历 AST 做语义转换(比如统一转颜色、补单位),但它基于不可变 AST —— 任何原地修改(如 node.value = ...)都无效。
- 只匹配
node.name === 'color',避免误改background-color或border-color - 值节点类型不确定:可能是
less.tree.Color、less.tree.Variable或less.tree.Call,必须用instanceof判断,不能假设node.value.toCSS()一定返回字符串 - 要返回新节点:
return new less.tree.Color([255, 0, 0], 1),而不是修改node.value - 若需取变量真实值(如
@primary对应的#007bff),必须让 Visitor 实现isPreEvalVisitor() { return true; },再调node.value.eval(context)
自定义函数插件必须返回 Less 内部 AST 节点
注册函数时如果直接 return 16 或 return '2rem',会触发 TypeError: Cannot read property 'toCSS' of undefined —— 因为 Less 编译器只认它自己的节点类型。
立即学习“前端免费学习笔记(深入)”;
- 尺寸类返回值必须是
new less.tree.Dimension(value, unit),例如new less.tree.Dimension(16, 'px') - 颜色类必须是
new less.tree.Color([r, g, b], a)或new less.tree.Color('#ff0000') - 字符串慎用
new less.tree.JavaScript('xxx'),仅限调试,不推荐用于生产 CSS 输出 - 函数名区分大小写:
px2rem()和Px2Rem()是两个不同函数,调用拼错就报Undefined function
最容易被忽略的是:Visitor 的类型判断和节点构造必须严格匹配 Less 当前版本的 AST 结构;函数插件里漏掉 new 或单位字段为空,都会导致编译静默失败或中途退出。别信“差不多”,Less 的 AST 类型检查很硬。


















