我目标是修改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的,这真的很棒。
3条答案
按热度按时间d5vmydt91#
由于@zeit/next-less已被弃用,您可以通过fallowing ant文档自定义您的主题,以实现动态主题。只需配置提供程序。无需额外的Babel配置。它对我来说工作得很好。https://ant.design/docs/react/customize-theme-variable
olmpazwi2#
您可以使用这个零依赖模块在next.js项目中自定义antdesign主题-
https://www.npmjs.com/package/next-plugin-antd-less
🎉 功能
🌊 兼容性
要了解更多有关如何在next.config.js文件中配置webpack的信息,请查看以下文章-
https://www.elvisduru.com/blog/how-to-customize-ant-design-theme-in-nextjs
**注意:**有些人注意到,在进行上述自定义之后,代码编译和热重新加载速度变慢了。
我也遇到了同样的问题。这个问题的发生似乎是因为当你添加这个自定义配置时,antd的
.less
文件也需要被编译,这会减慢整个代码编译/热重载的速度。在我的例子中,我不得不做一些小的自定义。所以我所做的就是禁用这个自定义配置(next.config.js)在开发应用程序时以及在部署应用程序之前,我启用了它。e5nqia273#
对于nextjs 12和更高版本,这个方法how to customize ant design theme in a nextjs application without-babel swc为您提供了仍然使用nextjs swc编译器的选项,而不像其他选项那样禁用它并使用被认为较慢的babel js。
1.在_app.tsx中导入andd变量
1.安装
next-with-less
包以减少对Next.js应用程序的支持。或
1.使用next-with-less为Next.js应用程序添加较少的支持。