在添加较少支持期间无法在下一个 js 中设置未定义的属性“样式”

我正在尝试使用 antd 设计向我的下一个 js 项目添加对 less 文件的支持，但无法设置未定义的属性“样式”。我想自定义 antd 主题，但该错误对我来说是一个障碍，任何人有任何想法请帮助我解决这个问题

//error screenshot

// next.config.js 文件

const lessToJs = require('less-vars-to-js');
const fs = require('fs');
const path =  require('path');
const withPlugins = require('next-compose-plugins');
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");
const themeVariable =  lessToJs(fs.readFileSync(path.join(__dirname, './styles/antd-custom.less'), 'utf8'));

const nextConfig = {}

module.exports = withPlugins(
    [
        [
            withLess({
                lessLoaderOptions: {
                    javascriptEnabled: true,
                    modifyVars: themeVariable,
                },
                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",
                        });
                    }
                    // config.resolve.alias["relay"] = path.join(
                    //     __dirname,
                    //     "__generated__",
                    //     "relay"
                    // );
                    return config;
                }
            }),
        ],
        [withCSS],
    ],
    nextConfig
)

//antd-custom.less 文件

@import "./variables.less";

@primary-color: @green-6;
@processing-color: @green-6;
@font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
@link-hover-decoration: underline;
@input-hover-border-color: @green-6;
@border-radius-base: 5px;
@label-color: @gray-6;
@table-header-bg: @gray-2;
@table-header-color: @gray-6;
@menu-item-active-bg: @gray-1;
@menu-item-color: @gray-6;
@tooltip-bg: @gray-10;
// Input
@input-border-color: @gray-4;
@input-placeholder-color: @gray-6;

我有一个类似的问题。我可以通过以下步骤解决。

1. 告诉 NextJs 降级到 Webpack 4

   // next.config.js 
   module.exports = withPlugins([...], {
      webpack5: false,
   })
   

2. 手动添加合适版本的相关依赖。

   yarn add --dev webpack@webpack-4 less less-loader@5