create-react-app使用antd按需加載的樣式無效問題的解決
官網(wǎng)給出的按需加載解決方案,先安裝 babel-plugin-import
因為antd默認引入樣式是less,所以需要手動配置為CSS,配置方法如下:
第一種方法:在package.json中配置,這種方法成功的前提是webpack里query下配置babelrc:true, 這樣就會使用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 則默認引入less ['import', { libraryName: 'antd', style: 'css' }], ] } } ] } ] }
至此,就算是成功完成按需加載引入樣式了
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React教程之Props驗證的具體用法(Props Validation)
這篇文章主要介紹了React教程之Props驗證的具體用法(Props Validation),非常具有實用價值,需要的朋友可以參考下2017-09-09react-native-fs實現(xiàn)文件下載、文本存儲的示例代碼
本篇文章主要介紹了react-native-fs實現(xiàn)文件下載、文本存儲的示例代碼,具有一定的參考價值,有興趣的可以了解下2017-09-09react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
這篇文章主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-09-09React實現(xiàn)下拉框的key,value的值同時傳送
這篇文章主要介紹了React實現(xiàn)下拉框的key,value的值同時傳送方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08React腳手架config-overrides.js文件的配置方式
這篇文章主要介紹了React腳手架config-overrides.js文件的配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter
這篇文章主要介紹了詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12React中的路由嵌套和手動實現(xiàn)路由跳轉(zhuǎn)的方式詳解
這篇文章主要介紹了React中的路由嵌套和手動實現(xiàn)路由跳轉(zhuǎn)的方式,手動路由的跳轉(zhuǎn),主要是通過Link或者NavLink進行跳轉(zhuǎn)的,實際上我們也可以通JavaScript代碼進行跳轉(zhuǎn),需要的朋友可以參考下2022-11-11React Js 微信禁止復(fù)制鏈接分享禁止隱藏右上角菜單功能
這篇文章主要介紹了React Js 微信禁止復(fù)制鏈接,分享,禁止隱藏右上角菜單的解決代碼,需要的朋友可以參考下2017-05-05