next.js v13.4+ 官方弃用 less，无法安全启用 css 模块化；.module.less 返回空对象因 webpack 未单独匹配该后缀，且规则顺序、css-loader 配置及 less-loader 版本均不兼容，v14 下 next-with-less 失效，推荐迁移到 .module.scss。
Next.js v13.4+ 官方已弃用 Less，无法安全启用 CSS 模块化支持；强行配置会导致构建失败或样式丢失，不建议在新项目中使用。
为什么 import styles from './Button.module.less' 总是返回空对象？
根本原因不是 loader 没装全，而是 Webpack 规则根本没把 .module.less 当作模块处理——它被普通 Less 规则捕获，跳过了 css-loader 的 modules: true 流程。
- Webpack 配置里缺少
/\.module\.less$/的独立匹配项（仅靠文件名不够） - 即使写了匹配规则，
css-loader那一环没传getLocalIdent或没设modules: true，依然无效 - 规则顺序错误：
.module.less规则必须放在.less规则之前（oneOf数组中），否则优先命中全局规则 -
less-loader@10+与 CRA 或旧版 Next.js 的 Webpack 4/5 不兼容，会报this.getOptions is not a function
Pages Router 下“能跑”不等于“能用”
只有当项目明确使用 Pages Router（即存在 pages/_app.tsx 且无 app/ 目录）时，才可能临时绕过部分限制，但需同时满足以下条件：
- 禁用自动模块化：
cssModules: { auto: false }必须写进next.config.js，否则styles.less仍被识别为模块 - 命名强制区分：
Button.module.less是唯一合法模块文件名，Button.less只能用于全局样式 - 全局样式必须在
pages/_app.tsx顶层静态导入，不能在组件内import，否则触发Global CSS cannot be imported from files other than your Custom _app.js - Ant Design 的
:global(.ant-menu-sub)写法会被 Webpack 5+ 的 CSS 解析器拒绝，必须手动剥离或改写为带本地类名的嵌套结构
为什么 next-with-less 在 v14 下大概率失效？
这个包只是硬编码复刻了 Sass 的规则逻辑，源码里直接写死正则：/\.module\.(scss|sass)$/，再替换成 less —— 它完全没适配 Next.js 对模块化 CSS 的强制隔离机制，也不处理 @plugin、JS 插值等 Less 特性。
- 它无法响应
cssModules.auto: false等新配置项 - v14 中 Webpack 5.90+ 的
RuleSet结构变化导致其cloneDeep+splice行为失效 - 即使 patch 成功，构建时仍会报
Syntax error: Selector ":global(.ant-menu-sub)" is not pure或Module parse failed: Unexpected character '@' - 官方已归档
@zeit/next-less，next-with-less无 v14 兼容性保障
真正稳定可行的路径是迁移到 .module.scss：变量改用 $primary-color，嵌套语法一致，::global{} 仍可用但需显式包裹——这不是妥协，而是避开 Next.js 架构冲突的必要取舍。Less 的模块化支持在 Next.js 生态里早已不是“配置问题”，而是“不存在的问题”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
