問題描述

• 使用 antd庫時
• 使用按鈕,須導入如下

import Button from 'antd/lib/button' import 'antd/dist/antd.css'

• 這樣會導入全局的樣式.

解決方案,配置按需加載

• 1.安裝 react-app-rewired取代 react-scripts, 可以擴展webapack 的配置, 類似vue.config.js
• npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save
• /config-overrides.js (注意直接在根目錄下)

const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) {config = injectBabelPlugin( // 在默認配置基礎上注入// 插件名, 插件配置["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],config);return config; }

• 2.改啟動腳本
• /package.json
• 將"scripts"中的 react-scripts 全部改為 react-app-rewired

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

• 3.使用按需導入

// import Button from 'antd/lib/button' // import 'antd/dist/antd.css' import { Button } from 'antd'

總結

以上是生活随笔為你收集整理的react --- 按需加载组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。