Less自定义函数必须返回特定AST节点:尺寸用new less.Dimension(16,'rem'),颜色用new less.Color([255,0,0],1)或new less.Color('#ff0000'),字符串用new less.Quoted('"hello"');插件需正确注入,参数须用getValue()等方法提取,返回类型错误将导致样式静默丢失。

因为 Less 编译器拒绝接收原始 JS 值作为函数返回值,必须返回特定 AST 节点实例,否则会静默中断样式生成,或抛出 TypeError: Cannot read property 'toCSS' of undefined。
自定义函数返回值类型错误是最常见原因
Less 不接受 return 16、return '12rem' 或 return '#ff0000' 这类原始值。它只认自己内部构造的 AST 类型:
- 尺寸类必须用
new less.Dimension(16, 'rem'),单位必须是字符串(如'rem'),不能是'16rem' - 颜色类必须用
new less.Color([255, 0, 0], 1)或new less.Color('#ff0000'),不能传对象字面量或十六进制字符串直接返回 - 字符串类要用
new less.Quoted('"hello"'),不是new less.Value('hello') - 所有返回值必须通过
less.functions.add()注册,且函数名大小写敏感:调用px2rem()但注册了Px2Rem()就会报Undefined function
插件没真正注入,函数根本没被加载
Less 4.0+ 彻底移除了 @plugin 指令,写它必报 Unknown rule: @plugin ——这不是路径错,是语法已废弃。
- Node.js 环境:
less.render(css, { plugins: [require('./my-plugin.js')] }),require()必须出现在options.plugins数组里,仅import或全局require无效 - Webpack +
less-loader:options.plugins = [require('./my-plugin.js')],插件文件必须是 CommonJS 格式(module.exports = { install(less, pluginManager) { ... } }) - 浏览器环境:必须在
less.min.js加载前执行window.less = { plugins: [myPlugin] },顺序错则less.plugins为空数组 - CLI:
lessc --plugin=./my-plugin.js input.less,路径是相对于当前工作目录,不是.less文件位置
参数取值方式不对,导致计算逻辑崩溃
传入的参数(如 px)是 less.Dimension 实例,不是数字:
立即学习“前端免费学习笔记(深入)”;
- 错:
px + 'rem'、px.toString()、px.value(属性不存在) - 对:
px.getValue()取数值,px.getUnit().toString()取单位(返回'px',不是'px'带引号) - 如果参数是颜色,需用
instanceof less.Color判断,再调用.toRGB()或.toHSL()提取分量 - 函数内不能依赖外部变量或闭包状态——编译是无状态的,每次调用都是全新上下文
最容易被忽略的是:即使函数逻辑完全正确,只要返回值类型错一位(比如该用 less.Dimension 却用了 less.Number),Less 就不会把它塞进 AST 树,后续样式规则就彻底消失,连空声明都不会输出。调试时别只看 JS 控制台,要检查最终生成的 CSS 是否包含对应属性行。


















