webpack 5 中 less 编译警告主因是配置错位、版本不匹配或 loader 重复介入；必须将 javascriptenabled、modifyvars、paths 等全部收进 lessoptions 对象，否则触发 invalid options object 警告并降级行为。
Webpack 5 里 Less 编译警告过多，基本不是代码写得“不规范”，而是 less-loader 配置错位、less 版本不匹配，或构建链路中多个 loader 对同一文件重复介入导致的——尤其常见于警告里反复出现 Deprecated features used、Unknown property 或空规则提示。
lessOptions 必须包裹所有配置项，否则警告变错误
Webpack 5 + less-loader@7.3.0+ 强制要求所有 Less 编译参数（包括 javascriptEnabled、modifyVars、paths）必须收进 lessOptions 对象，写在顶层会触发 Invalid options object 警告，并静默降级部分行为。
- 错误写法：
{ javascriptEnabled: true, modifyVars: { '@primary-color': '#1890ff' } } - 正确写法：
{ lessOptions: { javascriptEnabled: true, modifyVars: { '@primary-color': '#1890ff' } } } - 如果用了
paths（比如让~在 Less 里生效），也得塞进去：lessOptions: { paths: [path.resolve(__dirname, 'node_modules')] }
检查是否误启了 CSS 文件的 Less 解析
Webpack 默认把所有 @import 当作 Less 源码处理。若项目里混有纯 CSS 文件（如 normalize.css、reset.css），又没加 (css) 修饰符，Less 解析器会在第一行就报 ParseError: Unrecognised input，并伴随大量冗余警告。
- 必须改写为：
@import (css) "~normalize.css/normalize.css"; - 确保该语句出现在 .less 文件最顶部（不能被变量或 mixin 声明挡住）
- 别名
~要能被 Webpack 正确 resolve，否则仍会 fallback 到 Less 自身查找逻辑，报路径警告
Ant Design 等 UI 库主题路径失效引发连锁警告
用 @import '~antd/es/style/themes/default.less' 这类路径时，如果 antd 是 v5+，该文件已不存在——Less 会尝试解析一个空内容或 404 响应体，触发 Unexpected end of input 类警告；如果是 v4，则需确保 lessOptions.paths 明确包含 node_modules，否则 ~ 在 Less 层根本无效。
- 先运行
npm list antd确认版本 - antd@5：直接删掉所有
@import '~antd/...'，改用 CSS-in-JS 主题方案 - antd@4：必须配
lessOptions: { paths: [path.resolve(__dirname, 'node_modules')] } - 临时验证路径是否通：把
@import改成相对路径或绝对路径（如@import 'node_modules/antd/es/style/themes/default.less';）
压缩和 lint 不是警告源头，但会掩盖问题
--compress 只删空格换行，对重复选择器、未调用 mixin 导致的空规则（如 .clearfix { }）完全无感；而 lessc --lint 虽能扫出 mixin not called，但它不会跑在 Webpack 构建流程里——你看到的警告，90% 来自 loader 执行阶段的真实解析反馈。
- 真正要做的：用正则全局搜
\.([a-zA-Z0-9\-]+)\s*\{，重点看匹配结果里有没有.clearfix、.sr-only这类没括号的声明 - 把
.clearfix改成.clearfix()，把.sr-only改成.sr-only() - 确认所有
@import (reference)文件里没有顶层.xxx { }规则——它们不该输出，但漏写括号就会变成空块警告
最麻烦的警告往往藏在 node_modules 里第三方库的 Less 文件中，你改不了源码，只能靠 lessOptions.modifyVars 覆盖变量、用 @import (optional) 绕过缺失文件，或者干脆在 Webpack rules 里用 include 限定只处理自己项目的 .less 文件——别让 loader 去碰你不控制的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
