react腳手架create-react-app配置antd中css按需加載的坑該怎么解決

這篇文章將為大家詳細講解有關react腳手架create-react-app配置antd中css按需加載的坑該怎么解決，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

react腳手架（create-react-app）配置antd中css按需加載的坑。

下面是勘誤修正后的文章：

想利用create-react-app搭建基本項目，首先全局應該有這個工具：

cnpm i create-react-app -g

在全局安裝完之后，就可以利用create-react-app初始化項目了

create-react-app admin('項目名')// 下完包后 進入admin目錄cd admin// 然后就可以將項目跑起來yarn start

這樣我們就很順利的完成了react的基本結構搭建

接下來我們就可以在項目中配置antd

1、下載antd

cnpm i antd -S

2、配置antd按需加載css 首先下載babel-plugin-import

cnpm i babel-plugin-import -S

3、再創建.babelrc文件

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

4、最后在項目中引入antd組件

import { Button } from 'antd';<Button type="primary">Primary</Button><Button>Default</Button>

5、當你們看到這的時候，你們會發現，這不正常操作么，沒有什么坑啊，但是你會發現antd的樣式沒有起作用，？？？？滿腦子疑問，這里其實錯的不是我們，也不是antd，而是這個腳手架，它默認是不使用.babelrc的，它使用的是package.json中的babel配置和內部配置。

上一篇錯誤文章我們在這里出錯后就去修改node_modules了，這是絕對不能做的。

6、所以我們要將腳手架的內部配置項暴露出來進行修改，使用 npm run eject這個命令來暴露配置。但是運行 npm run eject會報出下面的錯誤：

7、此時這個報錯，需要將代碼利用git提交

git add .git commit -m "init"

8、然后再重新npm run eject 此時就就不會報上面的錯誤了，運行npm run eject之后，項目根目錄會生成config文件夾

9、找到config/webpack.config.js文件，將babelrc：false改為true，意思是啟用.babelrc的配置，如圖：

10、還沒有完，此時如果運行項目，瀏覽器還會報錯（天了嚕，真tm想棄用....)為什么會報錯呢？因為上面一步開啟了使用.babelrc文件，但是.babelrc的配置不正確，我們需要修改（為什么不正確呢？因為creat-react-app有一些默認的babel配置放到了package.json中）

11、此時將package.json中的babel下面的 "presets": [ "react-app" ] 配置到 .babelrc中，并將package.json中的babel刪除掉,如圖：

create-react-app的腳手架使用anted的css按需加載，由于此腳手架默認不支持使用.babelrc文件，所以需要將其配置暴露出來，需要用到npm run eject 命令，暴露配置文件后需要在config/webpack.config.js中開啟使用.babelrc文件的功能，開啟后配置.babelrc。配置的時候需要注意一點，將package.json中的babel配置剪貼到.babelrc中。

關于react腳手架create-react-app配置antd中css按需加載的坑該怎么解決就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。