NextJS 中使用 antd, 开启 cssModules 后， antd 样式就没有了，怎么解决？

[xmaxance]

const withLess = require('@zeit/next-less')

module.exports = withLess({
    cssModules: true,
    lessLoaderOptions: {
        javascriptEnabled: true
     }
})

antd 是不需要开启 cssModules 的，那么 NextJS 中如何处理 antd 不开启 cssModules，而其他开启呢？

[xmaxance]

请教一下各位大佬

[duan602728596]

const nextConfig = withLess({
webpack(config, options) {
// config.module.rules
// 在 rules 里面找到 less 文件的 loader，添加 exclude，忽略 node_modules 目录内的文件


// antd 的 less-loader
const { rules } = config.module;
const { use } = rules[rules.length - 1];
const loaders = options.isServer
? ['css-loader/locals']
: [isDev ? 'style-loader' : use[0], 'css-loader'];

config.module.rules.push({
test: /.*\.less$/,
use: [
...loaders,
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true
}
}
}
],
include: []
});

if (options.isServer) {
// antd 打包，而不是使用 node 的 require 方法引入，然后可以配置 antd 的按需加载
const externalsFunc = config.externals[config.externals.length - 1];

config.externals[config.externals.length - 1] = function(context, request, callback) {
if (/(antd|rc-|css-animation|@ant-design|highlight)/i.test(request)) {
return callback();
}

return externalsFunc(context, request, callback);
};
} else {
config.node = {
fs: 'empty',
path: 'empty'
};
}


return config;
}
});

你可以试一试

[xmaxance]

@duan602728596 非常感谢大佬的指导，这就试试。