前置条件:已创建 react 项目,已安装 node.js
创建一个 react 项目
参考链接(若使用 yarn 进行安装配置可以直接看这篇):
Ant Design——在 create-react-app 中使用
注意:以下命令的执行需要管理员权限,如果使用VS Code进行开发,可以右键快捷方式,选择以管理员方式运行。
一、初步配置
1.引入 antd
npm install antd
2.修改 react 项目中 src/App.js,引入 antd 的按钮组件
(可以将原来模板里面的内容全部删除,再复制以下代码进去)
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;
3.修改 src/App.css,在文件顶部引入 antd/dist/antd.css
(可以将原来模板里面的内容全部删除,再复制以下代码进去)
@import '~antd/dist/antd.css';
现在启动项目就可以在页面上看到一个蓝色按钮了:
至此已经成功运行 antd 组件了
以下内容为 antd 的高级配置,使用 craco (一个对 create-react-app 进行自定义配置的社区解决方案)。
二、高级配置
1.安装 craco
npm install @craco/craco
2.修改 package.json 里的 scripts 属性
"-“表示删除此行,”+"表示增加此行,下同
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
3.安装 craco-less(帮助加载 less 样式和修改变量)
npm install craco-less
4.在项目根目录创建一个 craco.config.js 用于修改默认配置,
复制以下内容到新建的文件中
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
5.重命名 App.css 为 App.less,同时修改引入的文件名后缀
/* src/App.js */
- import './App.css';
+ import './App.less';
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
6.重新启动项目,可以看到一个绿色的按钮,说明配置完成
注意:需要重新启动,直接保存修改看不到效果
npm start