本篇內(nèi)容介紹了“react引入antd報錯如何解決”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)定遠免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

react引入antd報錯的解決辦法：1、通過“yarn add babel-plugin-import”下載“babel-plugin-import”；2、在babel選項中配置plugins；3、在“webpack.config.js”文件中找到“getStyleLoaders()”函數(shù)加入自定義主題代碼即可。

引言

按照antd官網(wǎng)配置按需引入，還是出現(xiàn)一系列的報錯：

原因

• 當我們使用react-app-rewired配置按需加載，是不能執(zhí)行yarn eject，暴漏React腳手架webpack的配置文件，否則就會報以上的錯誤。如果需要暴漏配置文件，可以使用下面這種方式配置按需加載。

使用 babel-plugin-import

• 下載

npm install babel-plugin-import --save-dev 或
yarn add babel-plugin-import

配置package.json文件

• 在babel選項中配置plugins即可，其中style設(shè)置為true，就可以為antd定制主題。如果報錯，一般都是less過高。需要安裝小于3.0.0版本的。yarn add less@2.7.3，安裝成功后，再次運行。

"babel": {
  "presets": [
    "react-app"
  ],
  + "plugins": [
  +  [
  +    "import",
  +   {
  +      "libraryName": "antd",
  +      "style": true
  +    }
  + ]
  +]
}

antd定制主題

當把style設(shè)置為true之后，運行項目都會重新打包antd的less文件，加載最新的樣式文件。在webpack.config.js文件中找到getStyleLoaders()函數(shù)，加入以下代碼，在modifyVars中定制我們的主題。

“react引入antd報錯如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！