不能。Less的@plugin语法只支持引入预编译的CommonJS格式JS模块，不支持在.less文件中直接写JS逻辑；插件需导出含install方法的对象，通过less.functions.add注册函数，并用Less类型（如less.Dimension）包装返回值。
Less的@plugin语法到底能不能直接写JS逻辑
不能。Less 4.0+ 虽然引入了 @plugin，但它只接受预编译好的 JavaScript 模块（CommonJS 格式），不是让你在 .less 文件里写 JS 代码。常见误解是以为能像 Sass 的 @use + JS 函数那样 inline 写逻辑，实际必须提前写好、导出、再引用。
典型错误现象：@plugin "my-plugin.js"; 报错 Plugin file not found 或 Cannot read property 'install' of undefined，基本都是路径不对、导出格式错误或 Less 版本低于 4.0。
- 插件文件必须是独立的
.js（不能是.mjs或.ts，除非构建时转译） - 必须导出一个带
install(less, pluginManager)方法的对象 - Less CLI 和 Webpack less-loader 对插件路径解析规则不同：CLI 是相对于当前 shell 路径，loader 是相对于
webpack.config.js所在目录
如何正确导出一个可用的Less插件函数
插件本质是向 Less 的 AST 处理流程注入自定义节点处理器。比如想实现 px2rem(12px) 这样的函数，就得在 install 里注册一个 functions 方法，并返回 less.Dimension 实例。
关键点在于：你不能直接 return 数字或字符串，必须用 Less 提供的类型包装，否则编译会静默失败或报 TypeError: Cannot read property 'toCSS' of undefined。
立即学习“Java免费学习笔记（深入）”；
- 必须引入
less包（开发依赖），插件运行时依赖 Less 内部类如less.Dimension、less.Color -
install的第二个参数pluginManager仅用于注册 visitor，普通函数扩展用不到它 - 函数名在 Less 中调用时区分大小写，
px2rem()和Px2Rem()是两个函数
// px2rem-plugin.js
module.exports = {
install: function(less, pluginManager) {
const functions = less.functions;
functions.add('px2rem', function(px) {
const value = px.getValue();
const unit = px.getUnit().toString();
if (unit !== 'px') throw new Error('px2rem() only accepts px units');
return new less.Dimension(parseFloat(value) / 16, 'rem'); // 假设根字号16px
});
}
};
Webpack less-loader 中怎么加载本地插件
less-loader 的 options.plugins 只接受插件实例数组，不能传路径字符串。很多人卡在这步：写了插件文件，却在 webpack 配置里写成 plugins: ["./plugins/px2rem.js"]，结果报 TypeError: plugin.install is not a function。
正确做法是先 require 插件模块，再放进数组。注意 Node 的 require 路径是相对于 webpack.config.js，不是 .less 文件。
- 如果插件用了 ES6 import/export，必须用 Babel 或 tsc 编译成 CommonJS 输出
- 多个插件按执行顺序排列，后注册的函数可覆盖同名前一个（但不推荐重名）
- 开发环境热更新时，插件 JS 修改不会触发 less-loader 重编译，需手动重启 webpack dev server
// webpack.config.js
const Px2RemPlugin = require('./plugins/px2rem-plugin.js');
module.exports = {
module: {
rules: [{
test: /\.less$/,
use: [{
loader: 'less-loader',
options: {
lessOptions: {
plugins: [Px2RemPlugin]
}
}
}]
}]
}
};
为什么自定义函数在嵌套调用或变量中失效
Less 插件函数默认不参与 lazy evaluation —— 它们只在被直接调用时执行，不会在变量声明、@media 条件或 .mixin() 参数中自动求值。比如 @base: px2rem(32px); 看似合理，但 Less 会把整个 px2rem(32px) 当作未计算表达式存入变量，直到真正用到 @base 时才尝试执行，此时上下文可能已丢失，导致 undefined 或单位错误。
- 安全写法：所有插件函数调用都放在最终属性值位置，例如
font-size: px2rem(16px); - 避免在
@import的文件里定义插件函数再跨文件使用 —— 插件作用域是全局的，但函数注册时机取决于插件加载顺序，容易出现“函数未定义” - 调试技巧：在插件函数里加
console.log，启动 less-loader 时加verbose: true选项看加载日志
最常被忽略的一点：插件函数内部无法访问 Less 的变量、mixin 或作用域，它只是一个纯函数处理器。想做动态计算（比如读取 @root-font-size），得提前把值作为参数传进去，或者改用 postcss 插件来处理更灵活的 CSS 层面逻辑。
