11.0.1 版

使用 yarn 安装 next-with-less 包，并顺带最新版本的 less 和 less-loader

yarn add next-with-less less less-loader

并修改 next.config.js 配置文件：

// next.config.js
const withLess = require("next-with-less");

module.exports = withLess({
  lessLoaderOptions: {
    lessOptions: {
      modifyVars: {
        "@primary-color": "#f74a49",
        "@border-radius-base": ".5em"
      }
    }
  }
});

使用此包，TypeScript 可能会存在报错问题，但根据作者的说明，如果 PR 成功合并，可能 NextJS 本身就兼容 Less 了。

解决办法就是增加一个全局定义，参考 NextJS 自带的 /types/global.d.ts 文件写一个 Less 的定义就行。

// global.d.ts
declare module '*.module.css' {
  const classes: { readonly [key: string]: string }
  export default classes
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string }
  export default classes
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string }
  export default classes
}

在自己项目的 types 文件夹里面新建一个同名文件，输入如下代码：

declare module '*.module.less' {
  const classes: { readonly [key: string]: string }
  export default classes
}

就可以正常引入，支持以 CSS Module 的方式使用，不会报错了。

import styles from "./styles/List.module.less";

10.2.0 版

21.05.27 更新：最新教程使用的是 NextJS 10.2.0 版，如果你使用的版本低于此版本，可能会无法使用。毕竟 less-loader 最新版本使用的是 WebPack 5，已经有很多依赖为此进行了更新，试错非常需要时间和精力...

使用 yarn 安装 next-plugin-antd-less 和 babel-plugin-import 包

yarn add next-plugin-antd-less babel-plugin-import

这里是 package.json 的依赖情况，版本不一致很有可能导致配置无效或出现报错情况。

"babel-plugin-import": "^1.13.3",
"next": "^10.0.0",
"next-plugin-antd-less": "^1.2.1",

创建 .babelrc.js 文件，填写下方内容：

module.exports = {
  presets: [['next/babel']],
  plugins: [['import', { libraryName: 'antd', style: true }]],
};

创建 next.config.js 文件，填写下方内容：

const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  // optional
  modifyVars: { '@primary-color': '#f74a49' },
  // optional
  lessVarsFilePathAppendToEndOfContent: false,
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions: {},

  // Other Config Here...

  webpack(config) {
    return config;
  },

  future: {
    // if you use webpack5
    webpack5: true,
  },
});

启动项目，理论上 Less 可以成功使用了，注意只能用 require 引入，而不是 import

require('antd/dist/antd.less');

根据实际需求，替换 modifyVars 里面的参数，具体变量可以参考 Antd 文档 - 定制主题

next-plugin-antd-less 说明

测试了一下，不添加 babel-plugin-import 也可用，不过不能有 .babelrc.js 文件就是了

9.5.5 版（参考）

以下教程适用于 NextJS 9.5.5 版，新版本可能不可用

近期在细化魔改公司的某个 NextJS 项目，需要优化样式，于是想到了使用 Less 编译 Antd。一番折腾后，可以正常使用和编译了。以下内容仅供参考，以实际项目使用为准。

_app.tsx

从原有的 CSS 引入改成仅引入组件样式

// import 'antd/dist/antd.css';
import 'antd/lib/style/components.less';

修改 Next 配置文件

next.config.js

const withCSS = require('@zeit/next-css');
const withLess = require('@zeit/next-less')
const webpack = require('webpack');
const withBundleAnalyzer = require("@zeit/next-bundle-analyzer");

module.exports = withBundleAnalyzer(withLess(withCSS({
    webpack: (config) => {
        ...
    },
    lessLoaderOptions: {
        modifyVars: {
            'primary-color': '#fa3532',
            'link-color': '#fa3532',
        },
        javascriptEnabled: true
    }
})));

其中，modifyVars 是 Antd 的变量，可以修改颜色，间距等。javascriptEnabled 必须开启，才可以正常编译 Antd，否则会出现报错。