less-loader@11 与 webpack 5.70–5.79 不兼容，因缺少 getoptions() 方法且强制 lessoptions 嵌套；降级至 less-loader@7.3.0 并配 less@4.2.0 最稳，同时需检查 rule 排序、exclude、css-minimizer 并行设置及生产环境启用。
less-loader@11 与 Webpack 5 不兼容，根本原因是它只支持 Webpack 5.80+，而绝大多数 Webpack 5 项目（包括 Vue CLI 5、Create React App 5）实际运行的是 Webpack 5.70–5.79 区间版本——this.getOptions 和 loaderContext.getResolve 的 API 行为在此区间有细微差异，导致 less-loader@11 直接报错。
less-loader@11 报 this.getOptions is not a function
这不是你配错了，是 loader 内部调用链断裂。Webpack 5.79 及以下版本的 loaderContext 对象不提供 getOptions() 方法（它用的是旧版 this.query 或 loader-utils.getOptions()），而 less-loader@11 已彻底移除对旧 API 的兼容层。
- 执行
npm list webpack，若输出类似webpack@5.76.3，就别碰less-loader@11 - 降级到
less-loader@7.3.0是最稳解法：npm uninstall less-loader && npm install --save-dev less-loader@7.3.0 - 顺带确认
less@4.2.0已安装：npm install --save-dev less@4.2.0，避免Cannot find module 'less' - 删掉
node_modules和package-lock.json后重装，否则 peer dep 错乱会复现问题
less-loader@11 要求 lessOptions 但你写了顶层字段
即使强行升级成功，javascriptEnabled: true 或 modifyVars 放在 options 顶层会触发 Invalid options object —— less-loader@11 强制所有 Less 配置必须嵌套进 lessOptions，且不再接受任何“兼容写法”。
- 错误写法：
{ javascriptEnabled: true, modifyVars: { '@primary-color': '#1890ff' } } - 正确写法：
{ lessOptions: { javascriptEnabled: true, modifyVars: { '@primary-color': '#1890ff' } } } -
paths、math、relativeUrls等全部字段都得塞进lessOptions，无一例外 - Ant Design v4 主题导入失败？不是路径问题，是
lessOptions.paths没配node_modules路径
Webpack 5 rules 中 .less 被其他 loader 拦截
less-loader@11 不会报错，但样式全丢——因为 file-loader 或 url-loader 的 exclude 正则没覆盖 .less，导致 .less 文件被当成静态资源直接输出成 hash 名字，根本没进 less-loader。
- 检查所有
rules，尤其是处理资源文件的那条，确保exclude包含less：exclude: /\.(js|jsx|ts|tsx|json|css|less)$/ -
use数组顺序必须是倒序执行：['style-loader', 'css-loader', { loader: 'less-loader', options: { lessOptions: { ... } } }] - 如果用了
css-loader的importLoaders，值必须 ≥2（才能往前数到less-loader），设为 1 就只认css-loader自己 - 别信某些文档说 “加了
oneOf就自动排优先级”——oneOf里每条 rule 仍需手动控制test和exclude范围
压缩后样式异常，其实是 css-minimizer-webpack-plugin 和 less-loader@11 协同出问题
less-loader@11 输出的 CSS 更“干净”，但 css-minimizer-webpack-plugin 默认多线程压缩（parallel: true）会破坏 @import 顺序和嵌套结构，尤其当 Less 里用了 @plugin 或动态计算时，压缩后规则直接消失。
- 必须显式关闭并行：
parallel: false，否则部分媒体查询、变量注入结果会被误删 -
minimizerOptions里要禁用注释清理：{ level: { 1: { specialComments: 0 } } }，否则@import '~antd/...'可能被当注释干掉 - 确保
less-loader在生产环境 rule 中依然启用——有些配置把lessrule 用if (isDev)包住，build 时直接跳过 - 验证方式：打开打包后的 CSS 文件，搜
@import和bezierEasingMixin，存在才说明 less-loader 真正执行了
真正麻烦的不是报错本身，而是 less-loader@11 的静默失效——它可能不报错，但 javascriptEnabled 不生效、@import 被忽略、压缩后变量计算结果为空，最终样式丢失却找不到源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
