{"id":152707,"date":"2020-09-08T16:06:17","date_gmt":"2020-09-08T08:06:17","guid":{"rendered":"http:\/\/4563.org\/?p=152707"},"modified":"2020-09-08T16:06:17","modified_gmt":"2020-09-08T08:06:17","slug":"nextjs-%e4%b8%ad%e4%bd%bf%e7%94%a8-antd-%e5%bc%80%e5%90%af-cssmodules-%e5%90%8e%ef%bc%8c-antd-%e6%a0%b7%e5%bc%8f%e5%b0%b1%e6%b2%a1%e6%9c%89%e4%ba%86%ef%bc%8c%e6%80%8e%e4%b9%88%e8%a7%a3%e5%86%b3","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=152707","title":{"rendered":"NextJS \u4e2d\u4f7f\u7528 antd, \u5f00\u542f cssModules \u540e\uff0c antd \u6837\u5f0f\u5c31\u6ca1\u6709\u4e86\uff0c\u600e\u4e48\u89e3\u51b3\uff1f"},"content":{"rendered":"
\n
\n
\n

NextJS \u4e2d\u4f7f\u7528 antd, \u5f00\u542f cssModules \u540e\uff0c antd \u6837\u5f0f\u5c31\u6ca1\u6709\u4e86\uff0c\u600e\u4e48\u89e3\u51b3\uff1f <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : xmaxance <\/span> <\/i> 0<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
const withLess = require('@zeit\/next-less')  module.exports = withLess({     cssModules: true,     lessLoaderOptions: {         javascriptEnabled: true      } }) <\/code><\/pre>\n
antd \u662f\u4e0d\u9700\u8981\u5f00\u542f cssModules \u7684\uff0c\u90a3\u4e48 NextJS \u4e2d\u5982\u4f55\u5904\u7406 antd \u4e0d\u5f00\u542f cssModules\uff0c\u800c\u5176\u4ed6\u5f00\u542f\u5462\uff1f<\/p>\n<\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (3<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xmaxance <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u8bf7\u6559\u4e00\u4e0b\u5404\u4f4d\u5927\u4f6c                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : duan602728596 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 const nextConfig = withLess({
     webpack(config, options) {
     \/\/ config.module.rules
     \/\/ \u5728 rules \u91cc\u9762\u627e\u5230 less \u6587\u4ef6\u7684 loader\uff0c\u6dfb\u52a0 exclude\uff0c\u5ffd\u7565 node_modules \u76ee\u5f55\u5185\u7684\u6587\u4ef6<\/p>\n
     \/\/ antd \u7684 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’];<\/p>\n
     config.module.rules.push({
     test: \/.*.less$\/,
     use: [
     …loaders,
     {
     loader: ‘less-loader’,
     options: {
     lessOptions: {
     javascriptEnabled: true
     }
     }
     }
     ],
     include: []
     });<\/p>\n
     if (options.isServer) {
     \/\/ antd \u6253\u5305\uff0c\u800c\u4e0d\u662f\u4f7f\u7528 node \u7684 require \u65b9\u6cd5\u5f15\u5165\uff0c\u7136\u540e\u53ef\u4ee5\u914d\u7f6e antd \u7684\u6309\u9700\u52a0\u8f7d
     const externalsFunc = config.externals[config.externals.length – 1];<\/p>\n
     config.externals[config.externals.length – 1] = function(context, request, callback) {
     if (\/(antd|rc-|css-animation|@ant-design|highlight)\/i.test(request)) {
     return callback();
     }<\/p>\n
     return externalsFunc(context, request, callback);
     };
     } else {
     config.node = {
     fs: ’empty’,
     path: ’empty’
     };
     }<\/p>\n
     return config;
     }
    });<\/p>\n
    \u4f60\u53ef\u4ee5\u8bd5\u4e00\u8bd5                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xmaxance <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @duan602728596 \u975e\u5e38\u611f\u8c22\u5927\u4f6c\u7684\u6307\u5bfc\uff0c\u8fd9\u5c31\u8bd5\u8bd5\u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"
    NextJS \u4e2d\u4f7f\u7528 antd, …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/152707"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=152707"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/152707\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=152707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=152707"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=152707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}