Webpack 5 中 less-loader 配置必须将 javascriptEnabled、modifyVars 等字段嵌套在 lessOptions 对象内，否则报 Invalid options object；需显式安装 less@4.2.0 和 less-loader@8.3.0，配置 paths 或 alias 支持 ~ 别名，并确保 rules 中 exclude 包含 less、use 顺序为 ['style-loader', 'css-loader', 'less-loader']。
Webpack 5 中 less-loader 的配置结构已彻底改变，旧的 Webpack 4 写法在 Webpack 5 下会直接报 Invalid options object 错误，不是“不生效”，而是 loader 启动失败。
less-loader 配置必须套进 lessOptions
Webpack 4 / less-loader@5 允许顶层写 javascriptEnabled: true；Webpack 5 + less-loader@7+（包括当前最稳的 @8.3.0）已废弃该字段，必须嵌套进 lessOptions：
- ❌ 错误写法（Webpack 5 下启动即崩）：
{ javascriptEnabled: true } - ✅ 正确写法：
{ lessOptions: { javascriptEnabled: true } } - 如果同时用
modifyVars，也得一起塞进去：{ lessOptions: { javascriptEnabled: true, modifyVars: { '@primary-color': '#1890ff' } } } - Ant Design 等库大量依赖 Less 内联 JS（如
.bezierEasingMixin()），javascriptEnabled关闭会导致解析中断，报Unrecognised input
漏装 less 包是常见“配置错误”假象
less-loader 只是调度器，不带编译器。Webpack 5 不再 fallback 到全局或父级 node_modules，必须显式安装：
- 运行
npm list less less-loader，若显示empty或MISSING，立刻执行：npm install --save-dev less@4.2.0 less-loader@8.3.0 - 装完后建议删掉
node_modules和package-lock.json，重装一遍，避免 peer dep 解析错乱 - 别信某些文档只说装
less-loader就够了——没less，loader 根本跑不起来
rules 顺序和 exclude 冲突导致 .less 被当资源文件输出
现象是编译无报错，但最终 CSS 里全是 src_abc123.css 这类 hash 路径，样式全丢。本质是 file-loader 或 url-loader 的 exclude 没拦住 .less，让它被当成普通资源输出了，less-loader 根本没机会处理：
立即学习“前端免费学习笔记（深入）”；
- 检查所有
rules中的exclude正则，确保包含less，例如：exclude: /\.(js|jsx|ts|tsx|json|css|less)$/ -
use数组是倒序执行，正确链路必须是：['style-loader', 'css-loader', { loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true } } }] - 如果用了
css-loader的importLoaders，要确认它指向的是less-loader层级，比如importLoaders: 2表示往前数两层（less-loader→css-loader）
~ 别名在 Less 中失效，不是路径问题而是解析机制不同
~ 是 Webpack 的模块解析别名，但 less-loader 默认不走 Webpack 的 resolve.alias，所以 @import '~antd/es/style/themes/index.less' 会报 “wasn't found”：
- 最稳方案：在
lessOptions中加paths：paths: [path.resolve(__dirname, 'node_modules')] - 或显式配置 alias：
alias: { '~antd': path.resolve(__dirname, 'node_modules/antd') }，并确保该 alias 在 Webpackresolve.alias和lessOptions.paths中都生效 - 临时绕过：把
@import '~antd/...';改成@import 'antd/...';（去掉~），依赖 Webpack 默认的node_modules查找逻辑 - 注意：Ant Design v5 已移除
~antd/es/style/themes/index.less路径，该路径在 v5 下根本不存在
真正容易被忽略的点是：Webpack 5 对 less 和 less-loader 的版本耦合极敏感，less@4.2.0 + less-loader@8.3.0 是当前经过大量项目验证的稳定组合；任意一个版本偏移，都可能触发隐性解析失败或插件不兼容——别只盯着配置改，先锁死这两个包的版本。
