5-create-react-app整合antDesign功能

使用ant-design:

首先创建react项目：

create-react-app app

cd app

?

其次

AntDesign的高级配置：按需导入组件，自定义主题

?

1.下载依赖(利用yarn，或者npm都行)

yarn add react-router-dom??? //装路由插件

yarn add antd?? //装antd 插件 在 create-react-app 创建的工程中使用 antd 组件

yarn add react-app-rewired customize-cra??? //react-app-rewired?（一个对 create-react-app 进行自定义配置的社区解决方案)

yarn add babel-plugin-import?????????? //babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

yarn add less less-loader?????? //按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。

?

2.修改package.json

??"scripts": {

????"start": "react-app-rewired start",

????"build": "react-app-rewired build",

????"test": "react-app-rewired test",

??}

- 表示要删除的

+ 表示要添加的

?

?

3，在项目根目录创建config-overrides.js

在项目根目录创建一个 config-overrides.js?用于修改默认配置。（js配置文件需要修改）

module.exports =?function?override(config,?env)?{

??// do stuff with the webpack config...

??return?config;};

?

?

?

const { override,fixBabelImports,addLessLoader } = require(‘customize-cra‘);

module.exports = override(

??fixBabelImports(‘import‘,{

????libraryName: ‘antd‘,

????libraryDirectory: ‘es‘,

????style: true,

??}),

??addLessLoader({

???javascriptEnabled: true,

???modifyVars: { ‘@primary-color‘: ‘#1DA57A‘ },

?}),

);

?