marktrains
V2EX  ›  JavaScript

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

By marktrains at 2020 年 9 月 4 日 · 2551 次点击
const withLess = require('@zeit/next-less')

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

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

3 条回复  •  2020-09-04 20:14:52 +08:00
marktrains
   1
marktrains  
OP
   2020 年 9 月 4 日 via Android
请教一下各位大佬
duan602728596
   2
duan602728596  
   2020 年 9 月 4 日
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;
}
});

你可以试一试
marktrains
   3
marktrains  
OP
   2020 年 9 月 4 日
@duan602728596 非常感谢大佬的指导,这就试试。
推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
© 2026 V2EX · 27ms · 3.9.8.5