next.js 生产构建不支持 less 是因未内置 less-loader，需通过 next-with-less 注入 webpack rule 并显式 import 全局样式，否则 .less 文件被静默丢弃。
Next.js 生产构建不支持 Less 样式，不是因为编译器坏了，而是它压根就没内置 Less 解析能力——连 loader 都没配，自然无法识别 .less 文件。
next build 时 .less 文件被完全忽略
Next.js v13+ 默认只处理 .css 和 .module.css，其他后缀（包括 .less、.scss）在未配置 loader 的情况下会被 webpack 直接跳过。你写再多 @import 或变量，在 next build 阶段根本不会进编译流水线，也不会报错，只是静默丢弃。
- 常见现象：开发时
npm run dev看似正常（某些旧插件可能 hook 了 dev server），但next build后样式全丢，控制台无错误，源码里也找不到对应 CSS - 根本原因：生产构建走的是 webpack 编译链，而官方 config 没注册
less-loader，也没 fallback 规则
cssModules: true 会让全局 .less 彻底失效
如果你在 next.config.js 里启用了 cssModules: true 或已废弃的 experimental.cssImportSupport，那所有 .less 文件都会被强制当作模块处理：
- 即使是
globals.less这种没带.module后缀的文件，也会被注入局部作用域 -
@import变量、.mixin、:global()全部失效 - 编译可能成功，但生成的 CSS 里没有你期望的全局规则，或者报
variable is undefined
next-with-less 是目前唯一稳定方案
截至 2026 年，next-with-less 仍是适配 Next.js v14 的主流选择，它通过注入 webpack rule 补全缺失环节：
- 它硬编码区分了
.module.less和普通.less，不能靠外部 webpack config 覆盖 - 必须用它的导出函数包裹 config，不能直接改
webpack配置再传给withLess -
lessLoaderOptions.additionalData中的路径必须用__dirname，相对路径会失败
全局 Less 必须显式 import 到 _app.tsx 或 layout.tsx
next-with-less 只解决“能解析”，不解决“往哪挂载”：
-
src/styles/globals.less这类文件不会自动注入 document head - 必须在
app/layout.tsx或pages/_app.tsx里写import '@/styles/globals.less' - 如果只在某个组件里 import，它只会作用于该组件的 SSR 上下文，服务端渲染时可能漏样式，导致 FOUC
真正容易被忽略的点是：next-with-less 不等于“开箱即用”——它只是把门打开，但门后的路径、顺序、作用域边界，全得你自己踩准。 少一个 __dirname，少一次显式 import，或错配 cssModules，都会让生产构建变成黑盒。
