使用自定义主题——next.js、less、ant design

编程问答 2022-05-22

问题描述

我的目标是在 antdesign 中修改默认主题，但我无法实现。我什至从 sass 转到了 less，但仍然有一些不起作用。

我可能尝试了互联网上的所有内容。 从官方 nextjs 示例到一些教程和内容。

这是我的 next.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,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"
  }
}

大多数时候，当我搜索错误含义时，我发现问题出在任何包的版本上。但是更改包的版本只是给了我新的错误，我以无限循环结束，我无法找到匹配版本的组合。也许你可以告诉我你是如何编辑 antdesigin 或 config 的，这真的很棒。

解决方法

请确保您遵循本文 https://medium.com/anna-coding/how-to-config-ant-design-in-next-js-with-custom-theme-b704022591af 中的所有步骤。确保正确定义插件并正确使用 next-compose-plugins lib(https://www.npmjs.com/package/next-compose-plugins)。

antdantdantdjavascriptlessreactjsreactjsreactjsreactjs