ant design 入门

最新推荐文章于 2025-04-07 18:31:44 发布

铁匠汉斯

最新推荐文章于 2025-04-07 18:31:44 发布

阅读量816

点赞数

文章标签： javascript react.js 前端

本文链接：https://blog.youkuaiyun.com/qq_20110981/article/details/122628468

版权

本文介绍如何使用Yarn快速搭建React项目，并通过CRACO和less-loader配置自定义Ant Design的主题颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//新建react项目
yarn create react-app demo
cd demo
//运行
yarn start
//浏览器打开localhost:3000
//antd版本4.18
yarn add antd
//安装完毕后

安装完毕后修改src/app.js

import React from 'react';
import { Button } from 'antd';
import './App.css';

const App = () => (
  <div className='App'>
    <Button type="primary">button</Button>
  </div>
);

export default App;

修改src/app.css 第一行引入css

@import '~antd/dist/antd.css';

高级配置

yarn add @craco/craco

修改package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。

/* craco.config.js */
module.exports = {
  // ...
};

自定义主题#

按照配置主题的要求，自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能。我们可以引入 craco-less 来帮助加载 less 样式和修改变量。

首先把 src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件。

/* src/App.js */
- import './App.css';
+ import './App.less';

/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

然后安装 craco-less 并修改 craco.config.js 文件如下。

$ yarn add craco-less

craco.config.js

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考配置主题文档。修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

antd 内建了深色主题和紧凑主题，你可以参照使用暗色主题和紧凑主题进行接入。

同样，你可以使用 react-app-rewired 和 customize-cra 来自定义 create-react-app 的 webpack 配置。

eject#

你也可以使用 create-react-app 提供的 yarn run eject 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。