Next + Less + Antd：自定义主题 + cssModules

1. 安装 antd

npm install antd

2. 安装 less 相关

npm install @zeit/next-less @zeit/next-css less less-loader less-vars-to-js

3. 配置 next.config.js

// next.config.js
const cssLoaderConfig = require('@zeit/next-css/css-loader-config')

// 自定义 antd 主题
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path')
const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8'))

module.exports = (nextConfig = {}) => {
    return Object.assign({}, nextConfig, {
        webpack: (config, options) => {
            const {dev, isServer} = options
            const { lessLoaderOptions = {} } = nextConfig
            
            // 本地 less 设置
            config.module.rules.push({
                test: /.less$/,
                exclude: /node_modules/,
                use: cssLoaderConfig(config, {
                    extensions: ['less'],
                    cssModules: true,
                    cssLoaderOptions: {
                        importLoader: 1,
                        localIdentName: '[local]__[hash:base64:5]'
                    },
                    dev,
                    isServer,
                    loaders: [{
                        loader: 'less-loader',
                        options: {
                            ...lessLoaderOptions,
                            lessOptions: {
                                javascriptEnabled: true,
                                modifyVars: themeVariables
                            }
                        }
                    }]
                })
            })
            
            // antd less 设置
            config.module.rules.push({
                test: /.less$/,
                include: /node_modules/,
                use: cssLoaderConfig(config, {
                    extensions: ['less'],
                    cssModules: false,
                    cssLoaderOptions: {},
                    dev,
                    isServer,
                    loaders: [{
                        loader: 'less-loader',
                        options: {
                            ...lessLoaderOptions,
                            lessOptions: {
                                javascriptEnabled: true,
                                modifyVars: themeVariables
                            }
                        }
                    }]
                })
            })
            return config
        }
    })
}

4. 引入 antd less

// _app.js
import 'antd/dist/antd.less'