答案是less和less-loader版本不兼容或缺失:需用npm install --save-dev less less-loader安装,并确保less≥4.0.0、less-loader≥8.1.1,装后删node_modules和package-lock.json再重装。

Vue3项目里用lang="less"报错,基本不是语法问题,而是less和less-loader版本不兼容或缺失导致的。
报错 Module build failed: Error: Cannot find module 'less'
这是最直接的缺失提示:项目根本没装less,或者只装了生产依赖(--save),但构建时需要开发依赖。
- 运行
npm list less less-loader,如果显示empty或MISSING,说明没装或没装对 - 必须用
--save-dev安装:npm install --save-dev less less-loader - 注意:Vue CLI 5+ 和 Vite 默认不带 Less 支持,不装就必然报这个错,不存在“配置对了但不生效”的情况
报错 this.getOptions is not a function 或 loaderContext.getResolve is not a function
这是典型的less-loader版本太高、与当前 Webpack 或 Vue CLI 版本不匹配。Vue3 项目多基于 Webpack 5 或 Vite,而less-loader@8+才正式支持 Webpack 5 的新 API。
递归分析 Vue 项目组件依赖,从入口文件生成组件层级图,支持 Vue 2/3,输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 检查
package.json中less-loader版本:若低于@7.3.0,大概率触发此错 - 升级到兼容版本:
npm install --save-dev less-loader@8.1.1(对应 Webpack 5.x) - 同时确保
less≥@4.0.0;less@3.x会报less.render is not a function - 装完务必删掉
node_modules和package-lock.json,再npm install—— 缓存残留是常见复现原因
报错 TypeError: Cannot read property 'call' of undefined(启用 javascriptEnabled 后仍失败)
某些旧版 less(如 @2.x 或 @3.x)在解析 @plugin、math 等高级特性时,需要显式开启 JS 执行,但新版 less-loader 已弃用该选项。
立即学习“前端免费学习笔记(深入)”;
- 不要在
vue.config.js里硬加javascriptEnabled: true,它只对less-loader@5有效,高版本会直接忽略甚至报错 - 真正要做的,是统一升级:
less@4.2.0+less-loader@8.1.1,二者配对后无需任何额外选项 - 如果你项目里用了
@plugin或自定义函数,确认它们已适配less@4+的插件 API,旧插件大概率失效
版本匹配才是核心,不是装上就能用。很多报错表面是路径或 loader 配置问题,实际根源都在 less 和 less-loader 的主版本号是否对得上。每次改完依赖,清缓存、重装、重启服务,缺一不可。

















