如何在Next.js 12中配置antd Less支持 解决withAntdLess类型报错问题

问题根因 #

该类型报错是next-plugin-antd-less的内置类型声明与Next.js 12 内置的css-loader类型定义不匹配导致：虽然官方文档标注cssLoaderOptions的所有属性均为可选，但对应版本的类型声明文件未将属性标记为可选，因此// @ts-check校验时会抛出缺失属性的错误。

解决方案 #

• 方案1：补全缺失属性（推荐，不破坏类型校验）
  按照错误提示要求的字段补全cssLoaderOptions配置即可，修改后的配置示例：

// @ts-check
// next.config.js
const withAntdLess = require('next-plugin-antd-less');
/**
 * @type {import('next').NextConfig}
 **/

module.exports = withAntdLess({
  cssLoaderOptions: {
    esModule: true,
    sourceMap: process.env.NODE_ENV === 'development',
    modules: {
      mode: 'local'
    }
  },

  webpack(config) {
    return config;
  },

  reactStrictMode: true,
});

• 方案2：移除冗余配置
  如果你不需要自定义cssLoader相关规则，只是参考配置模板时默认加了空对象，直接删除cssLoaderOptions: {}这行即可，报错会自动消失。

• 方案3：类型断言绕过校验
  如果你确实需要传入空对象，可以通过两种方式跳过TS校验：

  1. 加@ts-ignore注释忽略单行校验：

  // @ts-ignore
  cssLoaderOptions: {},
  

  2. 用as断言为任意类型：

  cssLoaderOptions: {} as any,
  

• 方案4：更新插件版本
  升级next-plugin-antd-less到最新适配Next.js 12的版本，新版本已修复该类型定义错误。

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