less-loader 的 options 必须嵌套在 lessoptions 字段下，否则触发 invalid options object 错误；需同时安装 less 和 less-loader，且 exclude 必须包含 .less 以避免被资源 loader 处理，use 顺序应为 ['style-loader', 'css-loader', 'less-loader']，less 中的 ~ 别名需通过 lessoptions.paths 显式配置。
less-loader 的 options 必须嵌套进 lessOptions
Webpack 5 下，less-loader 不再接受顶层配置字段，比如 javascriptEnabled 或 modifyVars 直接写在 options 里会触发 Invalid options object 错误，进程直接退出。
这不是“不生效”，而是 loader 根本无法启动。
- ❌ 错误写法：
{ javascriptEnabled: true, modifyVars: { '@primary-color': '#1890ff' } } - ✅ 正确写法：
{ lessOptions: { javascriptEnabled: true, modifyVars: { '@primary-color': '#1890ff' } } } - Ant Design 等库依赖 Less 内联 JS（如
.bezierEasingMixin()），javascriptEnabled: false会导致Unrecognised input
less 和 less-loader 必须显式安装，不能只装一个
less-loader 只是调度器，不带编译器；less 才是真正把 .less 编译成 CSS 的核心包。Webpack 5 不再 fallback 到上级 node_modules，漏装任一都会静默失败或报错。
- 运行
npm list less less-loader，若显示empty或MISSING，立刻重装 - 推荐组合：
less@4.2.0+less-loader@8.3.0（当前最稳）或@10.2.0（需确认 Webpack 版本兼容性） - 装完建议删掉
node_modules/.cache/webpack，避免缓存干扰
rules 中的 exclude 必须覆盖 .less，否则样式被当成资源文件输出
现象是：无报错，但最终 HTML 里引入的是 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', 'less-loader']，顺序错或缺一都会导致热更新失效或@import解析失败 - 如果用了
MiniCssExtractPlugin，开发环境仍要用style-loader，否则 HMR 断掉
~ 别名在 Less 中失效，不是路径问题，是解析机制不同
Webpack 的 resolve.alias 对 JS import 生效，但 Less 文件内部的 @import '~antd/lib/style/index.less' 不走 Webpack resolver，而是由 Less 编译器自己处理。所以 ~ 默认无效，除非你显式配置 lessOptions.paths。
- 正确做法是在
lessOptions中加paths：{ lessOptions: { paths: [path.resolve(__dirname, 'node_modules')] } } - 或者统一用相对路径，比如
@import '../node_modules/antd/lib/style/index.less' - 别指望
alias自动透传到 Less 解析层——它不认这个
exclude 范围和 lessOptions 嵌套层级，这两处出错不会报具体样式错误，而是让整个流程静默绕过。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
