next.js v13.4+ 官方弃用 less，因架构冲突导致 withless 失败；app router 中无法安全使用 less，pages router 下需禁用 css 模块化并手动处理全局样式；推荐改用官方支持的 sass。
Next.js v13.4+ 官方已弃用 Less 支持，@zeit/next-less 归档、next-with-less 非官方且 v14 兼容性不稳定——你无法在 App Router 项目中安全配置 Less 全局导入，强行尝试只会触发 Syntax error: Selector ":global(.ant-menu-sub)" is not pure 或 Module parse failed: Unexpected character '@' 等构建错误。
为什么 next.config.js 加 withLess 会失败？
这不是 loader 配置漏了，而是架构冲突：
-
@zeit/next-less依赖 Webpack 4 和旧版 CSS 插件链，与 Next.js v13.2+ 移除第三方样式插件支持的决策直接抵触 -
next-with-less只是浅层复刻 Sass 的规则（比如硬编码\.module\.(scss|sass)$正则），无法适配 Next.js 对模块化 CSS 的强制隔离逻辑 - 即使 patch 成功，
:global、@plugin、JS 插值等 Less 特性仍会被 Webpack 5+ 的 CSS 模块解析器拒绝
Pages Router 下“能跑”不等于“该用”
仅当项目明确使用 Pages Router（即存在 pages/_app.tsx 且无 app/ 目录）时，才可能绕过部分限制：
- 必须禁用 CSS 模块化：把
styles.module.less改成styles.less，并在pages/_app.tsx顶层静态导入（import '../styles/styles.less'） - 不能在任何页面组件内
import.less 文件，否则报Global CSS cannot be imported from files other than your Custom _app.js - 若用了 Ant Design v4 的
:global写法，需手动剥离或改写为纯 CSS 类名，否则构建直接中断 - 需在
next.config.js中显式关闭自动模块化：cssModules: { auto: false }，否则styles.less仍被识别为模块
真正可行的替代路径：用 Sass 替代 Less
Next.js 官方持续支持 .module.scss，语法兼容度高，迁移成本极低：
- 把
button.less重命名为button.module.scss - 将
@primary-color: #1890ff;改为$primary-color: #1890ff; - 嵌套写法完全一致：
.btn { color: $primary-color; &:hover { opacity: 0.8; } } - 需要全局样式时，必须显式包裹
::global { .ant-menu-sub { ... } }，这是强制要求，不是可选项 - 无需安装额外 loader 或修改
next.config.js，开箱即用
最常被忽略的一点：所谓“全局 CSS”在 Next.js 中是路由系统隔离的。App Router 的 app/layout.tsx 导入不会影响 Pages Router 页面，反之亦然——如果你混用双路由，就得分别维护两套样式入口，而 Less 在其中任一系统里都缺乏可靠支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
