无需引入过多的css,不需要加载全局的css

1.手动引入

import Button from 'antd/es/button'
import 'antd/es/button/style/css'

2.通过配置

1.拉取webpack的配置

npm run eject

文件被修改了无法使用npm run eject命令

解决方式删除.git文件夹
安装完成多出一个config文件夹

2.安装.babel文件

yarn add babel-plugin-import --save-dev

3.重新yarn start运行项目

4.修改根目录的package.json的babel属性,配置plugins

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins":[
      [
        "import",
        {
          "libraryName":"antd",
          "libraryDirectory":"es",
          "style":"css"
        }
      ]
    ]
  }

5.重启项目，使用

import { Button } from 'antd';
// import Button from 'antd/es/button'
// import 'antd/es/button/style/css'
// import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
function App() {
  return (
    <div className="App">
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <br />
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
    </div>
  );
}
export default App;