快捷導(dǎo)航

create-react-app使用antd按需加載的樣式無效問題的解決

更新時(shí)間：2019年02月26日 09:11:40 作者：追風(fēng)的云月

這篇文章主要介紹了create-react-app使用antd按需加載的樣式無效問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

官網(wǎng)給出的按需加載解決方案，先安裝 babel-plugin-import

因?yàn)閍ntd默認(rèn)引入樣式是less，所以需要手動(dòng)配置為CSS，配置方法如下：

第一種方法：在package.json中配置，這種方法成功的前提是webpack里query下配置babelrc：true，這樣就會(huì)使用babelrc文件中的配置

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

第二種方法：在webpack.config.dev和webpack.config.prod中配置：

module: {
  strictExportPresence: true,
  rules: [
   {
    oneOf: [
     // Process JS with Babel.
     {
      test: /\.(js|jsx|mjs)$/,
      include: paths.appSrc,
      loader: require.resolve('babel-loader'),
      options: {
        plugins: [
          // 引入樣式為 css
          // style為true 則默認(rèn)引入less
          ['import', { libraryName: 'antd', style: 'css' }],
        ]
      }
     }
   ]
  }
 ]
}

至此，就算是成功完成按需加載引入樣式了

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React-Hook中使用useEffect清除定時(shí)器的實(shí)現(xiàn)方法
這篇文章主要介紹了React-Hook中useEffect詳解(使用useEffect清除定時(shí)器),主要介紹了useEffect的功能以及使用方法，還有如何使用他清除定時(shí)器，需要的朋友可以參考下
2022-11-11
淺談react useEffect閉包的坑
筆者最近用react useEffect閉包，其中踩到了一些坑在此與大家分享一下。需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-06-06
React鉤子函數(shù)之useDeferredValue的基本使用示例詳解
useDeferredValue是React 18中非常有用的一個(gè)鉤子函數(shù)，它可以幫助我們優(yōu)化渲染性能，并讓UI更加流暢，如果你還沒有嘗試過它，不妨在你的下一個(gè)React項(xiàng)目中試一試，這篇文章主要介紹了React鉤子函數(shù)之useDeferredValue的基本使用,需要的朋友可以參考下
2023-08-08
React新文檔切記不要濫用effect
這篇文章主要為大家介紹了React新文檔濫用effect出現(xiàn)的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
React報(bào)錯(cuò)解決之ref返回undefined或null
最近使用react做個(gè)滾動(dòng)監(jiān)聽獲取更多數(shù)據(jù)效果,當(dāng)想獲取dom時(shí)發(fā)現(xiàn)怎么也獲取不到,下面這篇文章主要給大家介紹了關(guān)于React報(bào)錯(cuò)解決之ref返回undefined或null的相關(guān)資料,需要的朋友可以參考下
2022-08-08
關(guān)于react useState更新異步問題
這篇文章主要介紹了關(guān)于react useState更新異步問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
2022-08-08
react中hook介紹以及使用教程
這篇文章主要給大家介紹了關(guān)于react中hook及使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
React中的Refs屬性你來了解嗎
這篇文章主要為大家詳細(xì)介紹了的React?Refs屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
解決React報(bào)錯(cuò)Property?'value'?does?not?exist?on?
這篇文章主要為大家介紹了React報(bào)錯(cuò)Property?'value'?does?not?exist?on?type?EventTarget的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
如何應(yīng)用?SOLID?原則在?React?中整理代碼之開閉原則
React?不是面向?qū)ο螅@些原則背后的主要思想可能是有幫助的，在本文中，我將嘗試演示如何應(yīng)用這些原則來編寫更好的代碼，對(duì)React?SOLID原則開閉原則相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-07-07