将 Ant Design 与 NextJS 结合使用（Ant Design 的自定义变量）
第一天：开始了一个新项目来学习 NextJS。今天遇到的第一个难题是尝试用 Ant Design 设置 NextJS 项目。在 NextJS 中使用 Ant Design 相当简单，但当我尝试为 Ant Design 使用自定义变量时，事情就变得棘手了。
您可以使用以下命令创建一个新的 NextJS 项目
yarn create next-app app-name
或者
npx create-next-app app-name
在 NextJS 项目中，安装 Ant Design。
yarn add antd
或者
npm install --save antd
在项目根目录下的 styles 文件夹中创建一个名为 antd.less 的新文件。styles如果尚未创建文件夹，请先创建一个。antd.less所有自定义变量都将存放在该文件中。
antd.less
@import "~antd/dist/antd.less";
@primary-color: #000; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers
您可以根据需要自定义这些变量。更多信息请参阅 Ant Design 自定义文档。
在该pages目录中创建一个名为 `<filename>` 的新文件，_app.js内容如下
_app.js
import React from "react";
import App from "next/app";
import "../styles/antd.less";
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return <Component {...pageProps} />;
}
}
export default MyApp;
您也可以在此处导入任何其他全局样式。
目前，您的自定义变量不会生效。要使其生效，您需要安装以下软件包：
yarn add @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less
或者
npm install --save @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less
现在，您需要为变量创建一个自定义的 NextJS 配置才能使其正常工作。
next.config.js
const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");
const isProd = process.env.NODE_ENV === "production";
// fix: prevents error when .less files are required by node
if (typeof require !== "undefined") {
require.extensions[".less"] = (file) => {};
}
module.exports = withCSS({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
},
...withLess(
withSass({
lessLoaderOptions: {
javascriptEnabled: true,
},
})
),
});
通过此配置，您将能够在项目中使用 Less、Sass 和 CSS 模块。您为 Ant Design 设置的自定义变量现在也将生效。
联系我
您可以在 DEV 上关注我，或在Twitter上与我联系。订阅我的新闻简报。
文章来源：https://dev.to/burhanuday/using-ant-design-with-nextjs-custom-variables-for-ant-design-57m5