1. 程式人生 > >使用create-react-app方式引入antd樣式

使用create-react-app方式引入antd樣式

今天試了一下使用create-react-app快速構建React 的環境下引用antd,but! 引入後發現我的antd的樣式壓根就沒有引入, 所以上網搜尋了一下
點此進入快速構建React開發環境
以下給出的解釋:
由於create-react-app構建React App的方式推薦zero-configuration(零配置),所以只能通過 npm run eject 的方式來講所有的配置項暴露出來。要注意的eject操作是不可逆轉的。

引入antd

我是使用

yarn add antd

引入antd

安裝babel-plugin-import

npm install babel-plugin-import --save-dev

暴露配置項

npm run eject

發現執行此操作報錯了
menu.saveimg.savepath20180816164311.jpg

不管他什麼錯

接著執行

yarn install

然後執行

npm run eject

此時可以成功 .會自動生成一個config的資料夾,時候我們先配置dev模式,
開啟config資料夾下面的webpack.config.dev.js檔案
image.png

就是新增如下程式碼

plugins: ['transform-runtime', ['import', {
   libraryName: 'antd',
   style: 'css'
 }]]

但是當你執行npm start 的時候會發現不行 報錯了.
那麼此時只要是再執行一次npm install 就可以 然後執行

npm start

專案就可以執行啦