推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
NextJS 中使用 antd, 开启 cssModules 后， antd 样式就没有了，怎么解决？
marktrains · 2020-09-04 18:00:05 +08:00 via Android · 1906 次点击这是一个创建于 1544 天前的主题，其中的信息可能已经有所发展或是发生改变。
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
 |
1
marktrains OP 请教一下各位大佬
|
 |
2
duan602728596 2020-09-04 19:20:05 +08:00
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; } }); 你可以试一试 |
|
3
marktrains OP @duan602728596 非常感谢大佬的指导，这就试试。
|
Select Language