在nextjs项目中，使用antd作为组件包，由于需要做一些样式的定制，所以使用了less文件。

但是，在使用启动时候出现如下报错：

[ error ] ./node_modules/antd/es/config-provider/style/index.less

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in /Users/bane/Develop/workspace/moensun/ithere/it-here-web-topic/node_modules/antd/es/style/color/bezierEasing.less (line 110, column 0)

根据报错提示，是由于less文件中存在javascript语句，需要设置。

在nextconfig.js 下配置

lessLoaderOptions:
    {
        javascriptEnabled: true,
        modifyVars: themeVariables // make your antd custom effective
    },

另外，nextjs 9 和antd 一起用的时候，需要对antd做一些独立配置

总体配置如下：

const withLess = 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, './app/assets/antd-custom.less'), 'utf8')
);

if (typeof require !== 'undefined') {
    require.extensions['.less'] = file => {
    }
}

module.exports = withLess({
    lessLoaderOptions:
        {
            javascriptEnabled: true,
            modifyVars: themeVariables // make your antd custom effective
        },
    webpack: (config, {isServer}) => {
        if (isServer) {
            const antStyles = /antd\/.*?\/style.*?/;
            const origExternals = [...config.externals];
            config.externals = [
                (context, request, callback) => {
                    if (request.match(antStyles)) return callback();
                    if (typeof origExternals[0] === 'function') {
                        origExternals[0](context, request, callback)
                    } else {
                        callback()
                    }
                },
                ...(typeof origExternals[0] === 'function' ? [] : origExternals),
            ];

            config.module.rules.unshift({
                test: antStyles,
                use: 'null-loader',
            })
        }
        return config
    }
});