react按需引入antd

最新推荐文章于 2024-02-27 17:01:41 发布

哆啦贝儿

最新推荐文章于 2024-02-27 17:01:41 发布

阅读量168

点赞数

分类专栏： react实战文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_40436793/article/details/109683553

版权

react实战专栏收录该内容

4 篇文章

订阅专栏

1. 安装依赖包：

npm install babel-plugin-import customize-cra react-rewired --save

2. 在项目根目录新建 config-overrides.js 文件，写入以下内容：

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

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

3. 修改packages.json文件

"scripts": {
      "start": "react-app-rewired start",
      "build": "react-app-rewired build",
      "test": "react-app-rewired test"
}

4. 重启服务：

npm start

注意：如果报错：'react-app-rewired' 不是内部或外部命令，也不是可运行的程序，是因为版本问题，重新安装合适版本启动即可：

npm i react-app-rewired@2.0.2-next.0

5. 使用：只需要引入组件样式会自动按需引入

import { Button } from 'antd'

export default class App extends Component {
      render() {
            return (
                  <div>
                        <Button type="primary">123</Button>
                  </div>
            )
      }
}

【参考】https://blog.youkuaiyun.com/weixin_41085315/article/details/96611048