如何配置Next.js实现monorepo转译并集成next bundle analyzer，解决less loader报错

你的配置存在三个核心问题导致less loader无法识别antd的less文件：

1. 插件组合顺序错误，nextConfig被错误放在withPlugins的插件数组参数中，导致less相关配置未生效
2. monorepo场景下根目录node_modules中的antd未加入转译列表，next默认不会处理外层目录的less资源
3. withTM与withAntdLess的嵌套逻辑错误，转译规则没有覆盖到antd的less文件

修改后的完整配置如下：

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const withAntdLess = require('next-plugin-antd-less')
const themeColor = require('../../themeColor')
const withPlugins = require('next-compose-plugins')
// 新增antd到转译列表，确保根目录node_modules的antd less被处理
const PACKAGE_NAMES = ['@package/ui', '@package/types', 'antd'] 
const withTM = require('next-transpile-modules')(PACKAGE_NAMES)

const nextConfig = {
  reactStrictMode: false,
  pageExtensions: ['page.tsx', 'page.ts'],
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false
      config.resolve.fallback.module = false
    }

    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

// 调整插件组合顺序，withPlugins第一个参数为插件数组，第二个为基础配置
module.exports = withPlugins([
  [withBundleAnalyzer],
  [withAntdLess, {
    lessVarsFilePath: './src/styles/variables.less',
    modifyVars: {
      '@primary-color': themeColor.primary,
      '@font-size-base': '15px',
      '@font-family': "'Spoqa Han Sans Neo', 'sans-serif'",
      '@font-size-lg': '15px',
      '@font-size-sm': '13px',
      '@divider-color': themeColor.bgOptional,
      '@link-decoration': 'unset',
      '@link-hover-decoration': 'unset',
      '@link-focus-decoration': 'unset',
      '@link-color': 'unset',
      '@link-hover-color': 'unset',
      '@link-active-color': 'unset',
    },
  }],
  [withTM]
], nextConfig)

如果修改后仍有报错，可以检查：

• 项目是否安装了less和less-loader依赖，版本要和next-plugin-antd-less要求的版本匹配
• 确保根目录node_modules的antd版本和项目声明的依赖版本一致，避免多版本antd导致的路径问题

内容的提问来源于stack exchange，提问作者september21st