Javascript 使用自定义主题-next.js,less,ant design

Javascript 使用自定义主题-next.js,less,ant design,javascript,reactjs,next.js,less,antd,Javascript,Reactjs,Next.js,Less,Antd,我的目标是修改antdesign中的默认主题,但我无法实现。我甚至从sass变为less,但仍然有些东西不起作用 我可能在网上什么都试过了。 从官方的nextjs示例到一些教程等等 这是我的下一个.config.js /* eslint-disable */ const withLess = require("@zeit/next-less"); const lessToJS = require("less-vars-to-js"); const fs =

我的目标是修改antdesign中的默认主题,但我无法实现。我甚至从sass变为less,但仍然有些东西不起作用

我可能在网上什么都试过了。 从官方的nextjs示例到一些教程等等

这是我的下一个.config.js

/* eslint-disable */
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, "./styles/global.less"), "utf8")
);

module.exports = 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;
  },
});
Package.json

{
  "name": "with-ant-design",
  "version": "1.0.0",
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@ant-design/icons": "4.5.0",
    "@next/bundle-analyzer": "^9.1.4",
    "@zeit/next-less": "^1.0.1",
    "antd": "4.12.3",
    "axios": "^0.21.1",
    "babel-plugin-import": "^1.13.3",
    "cross-env": "^7.0.3",
    "dayjs": "1.8.28",
    "esm": "^3.2.25",
    "less": "^2.7.2",
    "less-loader": "^6.0.0",
    "less-vars-to-js": "^1.3.0",
    "next": "latest",
    "null-loader": "^4.0.1",
    "postcss-preset-env": "^6.7.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "sass": "^1.32.8",
    "webpack": "4.46.0"
  },
  "browser": {
    "fs": false,
    "path": false
  },
  "license": "MIT",
  "devDependencies": {
    "antd-scss-theme-plugin": "^1.0.8"
  }
}

大多数时候,当我搜索错误含义时,我发现问题出在任何包的版本上。但更改软件包的版本只会给我带来新的错误,我最终陷入了ininity循环,无法找到匹配版本的组合。也许你可以告诉我你是如何编辑Antdesign或配置的,这将非常棒。

请确保遵循本文中的所有步骤。确保正确定义插件并正确使用next compose plugins lib()