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

iswrvxsc  于 2022-11-23  发布在  Ant Design
关注(0)|答案(3)|浏览(381)

我目标是修改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循环中无法找到匹配版本的组合。也许你可以告诉我你是如何编辑antdesigin或config的,这真的很棒。

d5vmydt9

d5vmydt91#

由于@zeit/next-less已被弃用,您可以通过fallowing ant文档自定义您的主题,以实现动态主题。只需配置提供程序。无需额外的Babel配置。它对我来说工作得很好。https://ant.design/docs/react/customize-theme-variable

olmpazwi

olmpazwi2#

您可以使用这个零依赖模块在next.js项目中自定义antdesign主题-
https://www.npmjs.com/package/next-plugin-antd-less

🎉 功能

  • 对其他Next.js插件的零依赖性
  • 支持Next.js和CRA项目
  • 修改Antd less变量后支持热更新
  • 支持无服务器模式
  • 支持Antd Pro
    🌊 兼容性
  • 下一个v12和v11(网络包5、SWC或Babel)
  • 低于v3.0+

要了解更多有关如何在next.config.js文件中配置webpack的信息,请查看以下文章-
https://www.elvisduru.com/blog/how-to-customize-ant-design-theme-in-nextjs

**注意:**有些人注意到,在进行上述自定义之后,代码编译和热重新加载速度变慢了。

我也遇到了同样的问题。这个问题的发生似乎是因为当你添加这个自定义配置时,antd的.less文件也需要被编译,这会减慢整个代码编译/热重载的速度。在我的例子中,我不得不做一些小的自定义。所以我所做的就是禁用这个自定义配置(next.config.js)在开发应用程序时以及在部署应用程序之前,我启用了它。

e5nqia27

e5nqia273#

对于nextjs 12和更高版本,这个方法how to customize ant design theme in a nextjs application without-babel swc为您提供了仍然使用nextjs swc编译器的选项,而不像其他选项那样禁用它并使用被认为较慢的babel js。
1.在_app.tsx中导入andd变量

import 'antd/dist/antd.less'

1.安装next-with-less包以减少对Next.js应用程序的支持。

yarn add next-with-less less less-loader

npm i next-with-less less less-loader

1.使用next-with-less为Next.js应用程序添加较少的支持。

const withLess = require('next-with-less');
/** @type {import('next').NextConfig} */
module.exports = withLess({
    lessLoaderOptions: {
        lessOptions: {
            modifyVars: {
                // Add variables here
                'font-family': 'Quicksand, sans-serif',
                'border-radius-base': '50px',
            },
        },
    },
    compiler: {
        styledComponents: true,
    },
});

相关问题