less插件不能在.less文件中写js逻辑,必须预编译为commonjs格式.js模块并显式注册;@plugin规则在less 3.0+已废弃,现代版本报“unknown rule: @plugin”即表明指令无效,需改用cli的--plugin、webpack的plugins选项或浏览器全局less.plugins注册。

Less插件不能在.less文件里写JS逻辑,必须提前写好.js模块并正确注册;否则编译直接失败或静默出错。
为什么@plugin "xxx.js"总是报错
现代 Less(4.0+)根本不识别@plugin规则——它早在 3.0 版本就已移除。你看到的错误 Unknown rule: @plugin 就是明确信号:这不是路径或语法问题,而是指令本身已被废弃。
- CLI 编译时需用
lessc --plugin=path/to/plugin.js显式传入 - Webpack 中要在
less-loader的options.plugins数组里require()插件对象 - 浏览器环境必须在
less.min.js加载前,通过全局less = { plugins: [...] }注册 - 插件文件必须是 CommonJS 格式(
module.exports = {...}),不能是.mjs或未转译的.ts
如何正确导出一个可用的函数插件
核心是注册函数并用 Less 类型包装返回值。直接 return 12 或 return '12rem' 都会触发 TypeError: Cannot read property 'toCSS' of undefined。
- 插件对象必须含
install(less, pluginManager)方法 - 调用
less.functions.add('myFn', function(...) { ... })注册 - 参数如
px是less.Dimension实例,需用px.getValue()和px.getUnit().toString()取值 - 返回值必须是
new less.Dimension(value, unit)、new less.Color([r,g,b], a)等 Less 内部类型 - 函数名在 Less 中区分大小写:
px2rem()和Px2Rem()是两个不同函数
Visitor 插件修改 AST 时容易踩的坑
Visitor 模式适合遍历和改写样式节点(比如统一处理 color 属性),但类型判断和节点替换逻辑极易出错。
- 不能假设
node.value是字符串或 Color —— 它可能是Variable、Call或DetachedRuleset,必须先用instanceof判断 - 修改必须返回新节点:
return new less.tree.Color(...),原地赋值node.value = ...无效 - 只匹配
node.name === 'color',避免误改background-color或border-color - 若需访问变量真实值(如
@primary对应的#007bff),得调用node.value.eval(context),且 Visitor 必须声明isPreEvalVisitor() { return true; }
命令行与 Webpack 中插件路径解析不一致
同一段配置,在 CLI 和 Webpack 下可能一个成功一个报 Plugin file not found,本质是路径基准不同。
- CLI 下
--plugin=foo.js的路径相对于当前 shell 执行目录(即你敲命令的地方) - Webpack 中
require('./plugins/px2rem.js')的路径相对于webpack.config.js所在目录 - 推荐写法:CLI 用绝对路径
--plugin=$(pwd)/plugins/px2rem.js;Webpack 用path.resolve(__dirname, 'plugins/px2rem.js') - 插件内部若需读取外部文件(如 JSON 配置),也得注意运行时
process.cwd()和__dirname的差异
最常被忽略的是:插件函数返回值类型必须严格匹配 Less 运行时期望的 AST 节点类,不是 JS 原生类型;哪怕逻辑完全正确,包装错了,编译器也不会报具体错误,只会输出空值或中断流程。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











