近期在细化魔改公司的某个 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,否则会出现报错。