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

10.2.0 版

使用 yarn 安装 next-plugin-antd-lessbabel-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,否则会出现报错。