（React）next.js搭配antd按需加载模块less配置

next.js服务端渲染less文件配置：

1. 新建.babelrc文件
   新增内容如下：

   
   image.png

2. 新建next.config.js
   内容如下：
   // less配置
   const withCss = require('@zeit/next-less');
   const lessToJS = require('less-vars-to-js');
   const fs = require('fs');
   const path = require('path');

const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, './static/modifyVars.less'), 'utf8')
)

// fix: prevents error when .css files are required by node
if (typeof require !== 'undefined') {
require.extensions['.less'] = file => {}
}

const conf = {
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables // make your antd custom effective
},
distDir: 'build',
generateEtags: false,
generateBuildId: async () => {
return 'build-' + Date.now();
}
};
module.exports = withCss(conf);

modifyVars.less为antd自定义主体less文件。

具体请前往antd的官网：https://ant.design/docs/react/customize-theme-cn
next.js配置，请前往： https://github.com/zeit/next.js/tree/7.0.0-canary.8/examples/with-ant-design-less

如有帮助或喜欢，别忘记点个赞哦！