V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
marktrains
V2EX  ›  JavaScript

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

  •  
  •   marktrains · 2020-09-04 18:00:05 +08:00 via Android · 1923 次点击
    这是一个创建于 1576 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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-09-04 18:01:19 +08:00 via Android
    请教一下各位大佬
    duan602728596
        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;
    }
    });

    你可以试一试
    marktrains
        3
    marktrains  
    OP
       2020-09-04 20:14:52 +08:00
    @duan602728596 非常感谢大佬的指导,这就试试。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2616 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 06:13 · PVG 14:13 · LAX 22:13 · JFK 01:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.