react中按需引入ant的样式

创建项目

create-react-app react-ant

安装antd

npm install antd --save

暴露隐藏文件

npm eject

npm add react-app-rewired customize-cra

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

接着

npm add babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

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

 module.exports = override(
   fixBabelImports(import, {
          
   
     libraryName: antd,
     libraryDirectory: es,
     style: css,
   }),
 );

最后引入组件

import React, {
          
    Component } from react
import {
          
    Button} from "antd";

export default class App extends Component {
          
   
  render() {
          
   
    return (
      <div>
        <Button type="primary" style={
          
   {
          
    marginLeft: 8 }}>
          Primary Button
       </Button>
      </div>
    )
  }
}