使用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
           

發現執行此操作報錯了

不管他什麼錯

接着執行

yarn install
           

然後執行

npm run eject
           

此時可以成功 .會自動生成一個config的檔案夾,時候我們先配置dev模式,

打開config檔案夾下面的webpack.config.dev.js檔案

就是添加如下代碼

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

但是當你執行npm start 的時候會發現不行 報錯了.

那麼此時隻要是再執行一次npm install 就可以 然後執行

npm start
           

項目就可以運作啦