題圖 By Clm From Bingjavascript
前不久寫了一篇關於react腳手架（create-react-app）配置antd中css按需加載的踩坑記錄，文章內容有誤，原文以下react腳手架（create-react-app）配置antd中css按需加載的坑。css
這篇文章直接修改了node_modules裏面的內容，通常開發中是絕對不能這樣作的，小編在整理的時候沒有及時發現，真是抱歉。
java
俗話說的好，有錯就要認,捱打要立正，關於後臺留言的全部評論我都接受，實在抱歉。node
下面是勘誤修正後的文章：
react
想利用create-react-app搭建基本項目，首先全局應該有這個工具：webpack
cnpm i create-react-app -g
在全局安裝完以後，就能夠利用create-react-app初始化項目了ios
create-react-app admin('項目名')// 下完包後 進入admin目錄cd admin// 而後就能夠將項目跑起來yarn start
這樣咱們就很順利的完成了react的基本結構搭建nginx
接下來咱們就能夠在項目中配置antdgit
一、下載antd
web
cnpm i antd -S
二、配置antd按需加載css 首先下載babel-plugin-import
cnpm i babel-plugin-import -S
三、再建立.babelrc文件
{ "plugins": [ ["import", { "libraryName": "antd", "style": "css" }] ]}
四、最後在項目中引入antd組件
import { Button } from 'antd';<Button type="primary">Primary</Button><Button>Default</Button>
五、當大家看到這的時候，大家會發現，這不正常操做麼，沒有什麼坑啊，可是你會發現antd的樣式沒有起做用，？？？？滿腦子疑問，這裏其實錯的不是咱們，也不是antd，而是這個腳手架，它默認是不使用.babelrc的，它使用的是package.json中的babel配置和內部配置。
上一篇錯誤文章咱們在這裏出錯後就去修改node_modules了，這是絕對不能作的。
六、因此咱們要將腳手架的內部配置項暴露出來進行修改，使用 npm run eject這個命令來暴露配置。可是運行 npm run eject會報出下面的錯誤：
七、此時這個報錯，須要將代碼利用git提交
git add .git commit -m "init"
八、而後再從新npm run eject 此時就就不會報上面的錯誤了，運行npm run eject以後，項目根目錄會生成config文件夾
九、找到config/webpack.config.js文件，將babelrc：false改成true，意思是啓用.babelrc的配置，如圖：
十、尚未完，此時若是運行項目，瀏覽器還會報錯（天了嚕，真tm想棄用....)爲何會報錯呢？由於上面一步開啓了使用.babelrc文件，可是.babelrc的配置不正確，咱們須要修改（爲何不正確呢？由於creat-react-app有一些默認的babel配置放到了package.json中）
十一、此時將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中。
點擊閱讀原文能夠查看原文章地址。
近期熱門文章：
歡迎關注、轉發或者點擊好看
本文分享自微信公衆號 - nodejs全棧開發（geekclass）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。