Next.js v13.4+ 官方弃用 Less 支持，因架构冲突导致构建错误；推荐改用官方持续支持的 Sass 替代，语法兼容、迁移成本低，且生态稳定。
Next.js 官方已弃用 @zeit/next-less，v13.4+（尤其是 App Router 项目）中直接集成 Less 会触发构建错误，比如 Syntax error: Selector ":global(.ant-menu-sub)" is not pure。这不是配置漏了，而是 Less 模块机制与 Next.js 的 CSS 模块隔离模型存在根本冲突。
Less 在 Next.js v13.4+ 中无法原生支持
Next.js 自 v13.2 起移除了对第三方样式插件的官方支持，@zeit/next-less 已归档、不再维护，且与 Webpack 5+ 和 Turbopack 不兼容。即使强行安装，也会在 dev 或 build 阶段报错：
-
Error: Cannot find module '@zeit/next-less'（npm 未找到包） -
Build Error: Syntax error: Selector ":global(...)" is not pure（模块化 CSS 机制拒绝全局选择器） -
Module parse failed: Unexpected character '@'（Less 变量未被识别）
这不是路径或 loader 配置问题，而是架构层面的不兼容。
替代方案：用 Sass + :global 模拟 Less 行为
如果你依赖 Less 的变量、嵌套或 @import，Sass（.scss / .sass）是唯一被 Next.js 官方持续支持的预处理器。它语法高度兼容 Less，迁移成本极低：
立即学习“前端免费学习笔记（深入）”；
- 把
styles.less改名为styles.module.scss - 将
@primary-color: #1890ff;改为$primary-color: #1890ff; - 嵌套规则写法完全一致：
.header { color: $primary-color; .title { font-weight: bold; } } - 全局样式需显式包裹：
:global { .ant-menu-sub { ... } }—— 这是必须项，否则会被模块化过滤
无需额外安装 loader 或修改 next.config.js，Next.js 默认支持 .module.scss。
若必须用 Less（如对接 Ant Design v4）
仅限 pages Router 项目，且接受降级维护风险：
- 使用社区维护分支：
npm install next-with-less --save-dev（非官方，v14 兼容性不稳定） - 禁用 CSS 模块化：将
Button.module.less改为Button.less，并确保只在_app.tsx或pages/_app.tsx中全局引入，避免模块化解析 - 绕过构建校验：在
next.config.js中添加experimental: { esmExternals: true }（可能引发其他副作用）
注意：App Router 下 use client 组件内不能 import .less 文件，会直接报 Global CSS cannot be imported from within node_modules。
真正麻烦的不是“怎么配”，而是 Less 的 :global、@plugin、JavaScript-enabled 插值等特性，在 Next.js 的模块化 CSS 约束下几乎无法安全启用。与其花时间 patch 插件，不如用 Sass 替代 —— 语法差异小，生态稳定，且所有 UI 库（包括 Ant Design v5+）都已转向 Sass 支持。
