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

比眉伴天荒 2023-10-09 10:49 24阅读 0赞

使用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       //按照 [配置主题][Link 1] 的要求，自定义主题需要用到 less 变量覆盖功能。

2.修改package.json

"scripts": \{

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

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

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

\- 表示要删除的

\+ 表示要添加的

![1649461-20190718193003438-1863676376.png][]

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

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

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

// do stuff with the webpack config...

return config;\};

![1649461-20190718193141061-1657431948.png][]

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' \},

\}),

);

![1649461-20190718193331231-1353242537.png][]

![1649461-20190718193343172-1456722151.png][]

转载于:https://www.cnblogs.com/wskb/p/11209526.html

[react-app-rewired]: https://github.com/timarney/react-app-rewired
[babel-plugin-import]: https://github.com/ant-design/babel-plugin-import
[Link 1]: https://ant.design/docs/react/customize-theme-cn
[1649461-20190718193003438-1863676376.png]: https://img2018.cnblogs.com/blog/1649461/201907/1649461-20190718193003438-1863676376.png
[1649461-20190718193141061-1657431948.png]: https://img2018.cnblogs.com/blog/1649461/201907/1649461-20190718193141061-1657431948.png
[1649461-20190718193331231-1353242537.png]: https://img2018.cnblogs.com/blog/1649461/201907/1649461-20190718193331231-1353242537.png
[1649461-20190718193343172-1456722151.png]: https://img2018.cnblogs.com/blog/1649461/201907/1649461-20190718193343172-1456722151.png