@plugin 规则在 Less 4.0+ 中已完全移除,插件必须通过 plugins 数组显式传入;自定义函数需返回 Less AST 节点(如 Dimension、Color),Visitor 修改 AST 必须返回新节点且正确判断类型。

@plugin 规则在 Less 4.0+ 中已完全失效,直接写 @plugin "my-plugin.js" 必然报错 Unknown rule: @plugin ——这不是路径或语法问题,是该指令本身已被移除。
Less 插件必须显式传入 plugins 数组,不能靠 @plugin 动态加载
现代 Less(≥3.0)的插件系统是“编译时注入”,不是“文件内声明”。所有插件必须在调用 less.render()、less.parse() 或 CLI/webpack 配置中,通过 plugins 选项显式传入一个插件实例数组。
- Node.js 环境:用
require('./my-plugin.js')得到插件对象,再塞进{ plugins: [...] } - 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
自定义函数插件必须返回 Less 内部节点类型,不能直接 return 原生 JS 值
注册函数时若直接 return 16 或 return '2rem',会触发 TypeError: Cannot read property 'toCSS' of undefined ——因为 Less 编译器只认它自己的 AST 节点。
- 尺寸类返回值必须是
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 插件修改 AST 时,原地赋值无效,必须 return 新节点
Visitor 模式常用于遍历并改写样式节点(比如统一处理 color 属性),但它的核心约束是“不可变 AST”:你不能改 node.value,必须构造并返回一个新节点。
立即学习“Java免费学习笔记(深入)”;
- 只匹配
node.name === 'color',避免误改background-color或border-color - 值节点类型不确定:可能是
less.tree.Color、less.tree.Variable、less.tree.Call,必须用instanceof判断,不能假设node.value.toCSS()一定返回字符串 - 要取变量真实值(如
@primary对应的#007bff),得调node.value.eval(context),且 Visitor 必须声明isPreEvalVisitor() { return true; } - 返回无效节点(如
undefined或原节点)会导致该声明被跳过,静默失败
插件路径和模块格式错误是最常见的静默失败原因
同一段代码,在 CLI 和 Webpack 下可能一个成功一个失败,根本原因常出在路径解析和模块导出上。
- 插件文件必须是 CommonJS 格式(
module.exports = { install() { ... } }),不能是.mjs、未转译的.ts,也不能是箭头函数导出(install需要访问this) - CLI 中
--plugin=path/to/plugin.js的path/to/plugin.js是相对于 shell 当前工作目录;而 Webpack 中require('./plugin.js')是相对于配置文件所在目录 —— 两者极易混淆 - 浏览器中若把
<script src="plugin.js"></script>放在less.min.js后面,less.plugins就是空数组,插件不会注册 - 插件里写
console.log()不会输出到浏览器控制台(除非在visitXXX中),调试建议用throw new Error('debug')强制中断


















