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

題圖 By Clm From Bing

今天沒事，準備利用react寫一個後臺管理系統，可是在剛建立項目引入antd的時候，就碰見了一個神坑！！！

再說坑以前，我們先來講一下如何利用create-react-app搭建項目和引入ant。

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

cnpm i create-react-app -g

在全局安裝完以後，就能夠利用create-react-app初始化項目了

create-react-app admin('項目名')// 下完包後 進入admin目錄cd admin// 而後就能夠將項目跑起來yarn start

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

接下來咱們就能夠在項目中配置antd

一、下載antd

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的，能夠在node_module/react-scripts/config/webpack.config.dev.js中看到

六、因此須要將上圖中的false改成true才大功告成

歡迎關注、轉發、點擊好看

本文分享自微信公衆號 - nodejs全棧開發（geekclass）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。