如何在样式表中使用nextjs / router

Question

我已经添加了antd软件包，并且我的Nextjs的配置如下所示：

require('dotenv').config()
const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  ...withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables, // make your antd custom effective
    },
    webpack: (config, { isServer }) => {
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === "function") {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === "function" ? [] : origExternals),
        ];

        config.module.rules.unshift({
          test: antStyles,
          use: "null-loader",
        });
      }
      return config;
    },
    publicRuntimeConfig: {
      // Will be available on both server and client
      BASE_URL: process.env.BASE_URL,
    },
  }),
});

在每个页面中，我分别在文件夹tsx中创建一个pagename.module.scss文件和一个sass文件

但是当我使用next/router推送新网址时，我的控制台出现以下错误：

我不明白问题所在。我什至使用动态导入，因此所有组件都只能在客户端呈现，因此服务器端没有依赖关系。

我遇到的另一个问题是，样式文件夹中的全局sass文件被添加到最终的css文件的顶部，然后添加了antd样式表，这迫使我添加了!important为了使它们更有效，我的全球风格也是如此。我该如何解决？