Less的@plugin仅在Node.js编译阶段生效，用于注册函数或操作AST，不嵌入CSS、不运行于浏览器，要求ES模块导出、相对路径正确，返回值须为less.tree.*类型实例。
Less 的 @plugin 不是“在 CSS 中运行 JS”
它不能把 JavaScript 嵌入最终生成的 CSS 文件里，也不能在浏览器端执行 JS。它的作用是在 Less 编译阶段（即 Node.js 环境下），让自定义 JS 逻辑参与变量计算、函数注册或 AST 操作——编译完就没了，和运行时无关。
@plugin 要求严格匹配 Less 版本和导出格式
Less v4.0+ 强制要求插件导出为 ES Module，默认不支持 module.exports；同时插件文件必须是 .js（不能是 .mjs 或 .cjs），且顶层需有默认导出函数：
export default function(less, options) {
less.functions.add('myFunc', () => 'hello');
}
常见错误：Cannot find module 'xxx' in @plugin，多数是因为路径没写对（相对路径基于入口 Less 文件，不是当前 JS 文件）、或用了 CommonJS 写法但 Less 版本 ≥4。
注册函数后，只能在 Less 表达式中调用，不能操作 DOM 或读取环境变量
你写的 JS 只能在编译期被调用一次，参数来自 Less 语法树节点，返回值必须是 Less 类型（如 new less.tree.Dimension、new less.tree.Color）：
立即学习“Java免费学习笔记（深入）”；
// plugin.js
export default function(less, options) {
less.functions.add('px2rem', function(px) {
const value = px.value; // number
return new less.tree.Dimension(value / 16, 'rem');
});
}
然后在 Less 中使用：font-size: px2rem(32); → 编译为 font-size: 2rem;。试图返回 document.body.clientWidth 会报错，因为编译时根本没有 DOM。
调试插件 JS 的唯一可靠方式是加 console.log 并观察 Node.js 编译日志
浏览器开发者工具看不到插件代码，所有日志只出现在终端（比如你用 lessc --js 或 webpack-less-loader 启动编译时）：
- 确保启动命令含
--js标志（Less CLI）或配置lessOptions: { javascriptEnabled: true }（webpack） - 插件里写
console.log('plugin loaded')，如果没输出，说明路径/导出/版本三者至少一个不匹配 - 不要依赖
process.env或全局变量——不同构建环境（CI、本地、webpack dev server）可能有不同 Node.js 版本和上下文
真正容易被忽略的是：插件函数内部无法访问 Less 变量作用域（比如不能直接读 @primary-color），必须显式传参；而所有类型转换都要手动做，比如把字符串转成颜色对象得用 new less.tree.Color([r,g,b])，不是直接返回 '#ff0'。
