如何在Next.js中启用CSS的Less支持-css教程-PHP中文网

next.js 官方不支持 less，必须借助 next-with-less 等第三方工具；启用 cssmodules: true 或 experimental.cssimportsupport 会导致 .less 全局导入失效，因其强制模块化处理；全局 less 文件须在 layout.tsx 或 _app.tsx 中显式 import 才能生效。

如何在next.js中启用css的less支持

Next.js 官方不支持 Less，这是个明确的事实。你不能靠开箱即用的配置让它工作，必须借助第三方构建工具链补足缺失环节。

为什么 next.config.js 里加 cssModules: true 会让 Less 全局 import 失效

因为 cssModules: { auto: true }（或 cssModules: true）会把所有 .less 文件当作模块处理，哪怕你没写 .module.less 后缀。结果就是：@import 'xxx.less' 被当成局部作用域导入，变量、mixin、全局样式全部失效，编译直接报错或静默丢弃。

检查你的 next.config.js 是否含 cssModules: true 或 experimental.cssImportSupport: true —— 后者早已废弃，启用反而破坏全局 CSS 加载
Next.js v13+ 默认只识别 .css 和 .module.css；.less 文件默认被忽略，除非你显式注入 loader
如果你用了 next-with-less，它内部硬编码了对 .module.less 和非 .module.less 的区分逻辑，外部无法覆盖 —— 所以别试图用 webpack config “强行改 rule.test”

next-with-less 是当前最稳的 Less 支持方案

截至 2026 年，next-with-less 仍是适配 Next.js v14 的主流选择，它基于 webpack rule 注入，兼容 SWC 和 Turbopack（需额外验证），且能透传 less-loader 配置。

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

安装命令：npm install less less-loader next-with-less
next.config.js 写法（注意顺序和导出方式）：

const withLess = require('next-with-less');
<p>/*<em> @type {import('next').NextConfig} </em>/
module.exports = withLess({
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: {
'@primary-color': '#1890ff',
},
// 注意：additionalData 中路径必须用 <strong>dirname，不能用相对路径
additionalData: `@import "${</strong>dirname}/src/styles/variables.less";`,
},
});</p>

确保 variables.less 是纯变量定义（无 .class {}），否则会被当成样式注入到每个组件中，引发重复渲染或冲突
如果项目用 Ant Design，modifyVars 必须包含 hack: 'true; @import ...' 这种 hack 写法才能让主题变量生效（参考 antd 官方文档）

全局 Less 文件必须在 _app.tsx 或 layout.tsx 中 import

next-with-less 只负责把 .less 编译成 CSS，但不会自动注入 DOM。如果你写了 global.less，它不会像 globals.css 那样被自动加载。

正确做法：在 src/app/layout.tsx（App Router）或 src/pages/_app.tsx（Pages Router）顶部 import '@/styles/global.less'
错误做法：把 import 放在某个组件内部 —— 它只会作用于该组件的 SSR 上下文，客户端 hydration 时可能丢失，且无法保证执行顺序
不要在 .module.less 里写 :global(.xxx) { ... } —— 这是 scss loader 的语法，less-loader 不识别，会直接报错“Syntax error: Selector is not pure”

Ant Design 按需加载 + Less 主题定制的坑

Ant Design v4/v5 的 Less 主题依赖 babel-plugin-import + less-loader 协同工作，缺一不可。单独配 next-with-less 不足以让 import { Button } from 'antd' 自动加载对应样式。

必须安装并配置 babel-plugin-import（v3+ 支持 SWC）：npm install --save-dev babel-plugin-import
.babelrc 或 babel.config.js 中加：

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

style: true 表示加载 es/button/style/index.js，它内部会 require('antd/es/button/style/index.less') —— 这才是触发 less-loader 编译的关键入口
如果用的是 Ant Design v5，确认 less 版本 ≥ 4.1.3（v4.2+ 有已知变量解析 bug）
热更新失效？检查 next.config.js 是否启用了 webpackCache: false，或 less-loader 的 cache 选项是否关闭