create-react-app使用antd按需加載的樣式無(wú)效問(wèn)題的解決
更新時(shí)間：2019年02月26日 09:11:40 作者：追風(fēng)的云月
這篇文章主要介紹了create-react-app使用antd按需加載的樣式無(wú)效問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
官網(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' }],
]
}
}
]
}
]
}
至此，就算是成功完成按需加載引入樣式了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React教程之Props驗(yàn)證的具體用法（Props Validation）
這篇文章主要介紹了React教程之Props驗(yàn)證的具體用法（Props Validation），非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
react-native-fs實(shí)現(xiàn)文件下載、文本存儲(chǔ)的示例代碼
本篇文章主要介紹了react-native-fs實(shí)現(xiàn)文件下載、文本存儲(chǔ)的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解下2017-09-09
state狀態(tài)是組件實(shí)例對(duì)象身上的狀態(tài)，不是組件類本身身上的，是由這個(gè)類締造的實(shí)例身上的。這篇文章主要介紹了React 對(duì)state的理解,需要的朋友可以參考下2021-09-09
react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
這篇文章主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-09-09
React實(shí)現(xiàn)下拉框的key,value的值同時(shí)傳送
這篇文章主要介紹了React實(shí)現(xiàn)下拉框的key,value的值同時(shí)傳送方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了React的Hook，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
React腳手架config-overrides.js文件的配置方式
這篇文章主要介紹了React腳手架config-overrides.js文件的配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter
這篇文章主要介紹了詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式詳解
這篇文章主要介紹了React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式,手動(dòng)路由的跳轉(zhuǎn)，主要是通過(guò)Link或者NavLink進(jìn)行跳轉(zhuǎn)的，實(shí)際上我們也可以通JavaScript代碼進(jìn)行跳轉(zhuǎn)，需要的朋友可以參考下2022-11-11
React Js 微信禁止復(fù)制鏈接分享禁止隱藏右上角菜單功能
這篇文章主要介紹了React Js 微信禁止復(fù)制鏈接，分享，禁止隱藏右上角菜單的解決代碼,需要的朋友可以參考下2017-05-05