less 4.0+ 中 @plugin 指令已彻底废弃,必须通过 plugins 数组显式传入插件:node.js 用 less.render({ plugins: [require('./p.js')] }),webpack 配置 less-loader 的 options.plugins,浏览器需在 less.min.js 前设置 window.less = { plugins: [p] }。

Less 4.0+ 中 @plugin 指令已彻底移除,写它必报 Unknown rule: @plugin —— 这不是路径错、权限错,是语法本身被废弃了。想扩展功能,必须走显式注册路径。
插件怎么传入才生效?
插件不是“写了就能用”,而是编译时注入的逻辑模块,必须通过 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文件位置
自定义函数返回值为什么总报 toCSS 错误?
直接 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') - 参数如
px是less.Dimension实例,得调px.getValue()和px.getUnit().toString()取值 - 函数名区分大小写:
px2rem()和Px2Rem()是两个不同函数,调用拼错就报Undefined function
Visitor 插件改 AST 为什么没效果?
Visitor 基于不可变 AST,原地赋值(比如 node.value = ...)完全无效,必须返回新节点。
- 只匹配
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 = ...
最常被忽略的是:Visitor 的节点类型判断和返回值构造,这两步错任何一环,插件就静默失效——既不报错,也不生效。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











