less 4.0+中@plugin指令已彻底移除,必须通过plugins数组显式传入插件;自定义函数返回值须为less.dimension、less.color等ast节点实例,原始值或字符串将触发tocss错误。

Less 4.0+ 中 @plugin 指令已彻底移除,写它必报 Unknown rule: @plugin——这不是路径错、拼写错或权限问题,是语法本身被砍掉了。想加函数,必须走显式注册路径,且返回值类型不对会直接触发 TypeError: Cannot read property 'toCSS' of undefined。
Less 自定义函数为什么总报 toCSS 错误?
根本原因是:Less 编译器只接受它自己的 AST 节点实例作为返回值,原始 JS 值(如数字、字符串)会被直接拒绝。
- 尺寸类必须返回
new less.tree.Dimension(16, 'px'),单位必须是字符串('rem'、'em'等),不能是'16px'这种整体字符串 - 颜色类必须返回
new less.tree.Color([255, 0, 0], 1)或new less.tree.Color('#ff0000'),不能返回'#ff0000'或{ r: 255 } - 参数如
px是less.tree.Dimension实例,得用px.getValue()和px.getUnit().toString()取值,不能直接px + '' - 函数名严格区分大小写:
px2rem()和Px2Rem()是两个不同函数,调用时拼错就报Undefined function
插件怎么传入才真正生效?
插件不是“写了就能用”,而是编译时注入的逻辑模块,必须通过 plugins 数组显式传入,且加载顺序/方式错一点就静默失效。
- Node.js 环境:
less.render(css, { plugins: [require('./my-plugin.js')] }),require()必须在options里,仅import或全局require不起作用 - Webpack +
less-loader:options.plugins = [require('./my-plugin.js')],插件文件必须是 CommonJS 格式(module.exports = { install() { } }) - 浏览器环境:必须在
less.min.js加载前定义window.less = { plugins: [myPlugin] },顺序错则less.plugins为空数组 - CLI 编译:
lessc --plugin=./my-plugin.js input.less,路径是相对于当前工作目录,不是.less文件位置
Visitor 插件改 AST 为什么没效果?
Visitor 基于不可变 AST,原地赋值(比如 node.value = newColor)完全无效,必须返回新节点,且类型判断和构造稍有偏差就会白忙一场。
- 只匹配
node.name === 'color',避免误改background-color或border-color这类属性名 -
node.value类型不确定:可能是less.tree.Color、less.tree.Variable或less.tree.Call,必须用instanceof判断,不能假设它是字符串 - 要取变量真实值(如
@primary对应的#007bff),得让 Visitor 实现isPreEvalVisitor() { return true; },再调node.value.eval(context) - 修改必须返回新节点:
return new less.tree.Color([255, 0, 0], 1),不是node.value = ...
最常被忽略的是节点类型判断和返回值构造这两步——错任何一环,AST 就不会变,而控制台也不会报错,只会默默输出旧样式。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











