如何通过Less的@plugin指令在CSS中直接运行JavaScript代码？-css教程-PHP中文网

less的@plugin仅在node.js编译阶段生效，用于注册函数或操作ast，不嵌入css、不运行于浏览器，要求es模块导出、相对路径正确，返回值须为less.tree.*类型实例。

如何通过less的@plugin指令在css中直接运行javascript代码？

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 Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

// 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'。