如何在react项目中使用Ant Design的按需导入样式和结构

react项目中按需导入有两种方法

第一种方法就是在需要使用到ant-design的组件中通过手动按需去导入

        导入结构: import Button from 'antd/es/button';

        导入样式:import 'antd/es/button/style/css'

 

 第二种方法:          通过babel-plugin-import 完成按需加载 

         1.首先我们通过npm run eject :拉去react的配置文件

         2.这个时候我们通过npm安装的时候会遇到Remove untracked files, stash or commit any         changes, and tryagain.错误,这个错误是关于文件被修改啦,无法执行npm run eject命令

          问题解决:就是找到本文件夹的目录找到隐藏文件git 然后删除他,删除以后再次执行

npm run eject命令

       拉去npm run eject成功以后  会出现config

 在项目的根目录下找到package.json文件

在package.json文件中"babel": {}地方添加

"plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]

      然后再需要用到ant UI组件的地方直接引入就行啦样式也会有效果