react中引入less并支持antd主題換膚方式
更新時間：2024年01月24日 10:24:25 作者：土豆Coder
這篇文章主要介紹了react中引入less并支持antd主題換膚方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
介紹
antd的樣式使用了Less作為開發(fā)語言，并定義了一系列全部的樣式變量，我們可以改變對應(yīng)變量值來進(jìn)行相應(yīng)調(diào)整換膚。
react中引入less
要修改webpack配置，首先需要將webpack的配置文件先暴露出來
npm run eject
安裝依賴包
npm i less less-loader
然后修改eject出來的webpack.config.js文件
antd主題換膚
修改上面的配置
其中vars.less文件內(nèi)容為
// vars.less @import '~antd/lib/style/themes/default.less'; @dark-bg: #161626; @primary-color: #56A902; @font-size-base: 12px; @male-color: #3F92FE; @female-color: #FF7D97; @error-color: #cf1322;
以上這些變量都可以在全局.less文件中直接引用，且無需再import該文件。
另外，除了加載指定路徑外，也可以直接覆蓋主題變量，同樣生效。
{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader',
options: {
modifyVars: {
'primary-color': '#0f0'
}
}
}]
},
報錯1
那一定是你的路徑寫的不對，好好檢查一下。
版本號
因為這些個依賴總是隨時更新，然而每次更新都會出現(xiàn)新的報錯，也不給出個具體方案，所以這里的版本號請參考下表
// package.json "antd": "^4.0.1", "less": "2.7.2", "less-loader": "^5.0.0", "react": "^16.13.0",
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React實現(xiàn)導(dǎo)入導(dǎo)出Excel文件
本文主要介紹了React實現(xiàn)導(dǎo)入導(dǎo)出Excel文件，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
這篇文章主要介紹了原生+React實現(xiàn)懶加載(無限滾動)列表方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
基于CSS實現(xiàn)MaterialUI按鈕點擊動畫并封裝成 React 組件
筆者先后開發(fā)過基于vue,react,angular等框架的項目,碧如vue生態(tài)的elementUI, ant-design-vue, iView等成熟的UI框架, react生態(tài)的ant-design, materialUI等,這些第三方UI框架極大的降低了我們開發(fā)一個項目的成本和復(fù)雜度,使開發(fā)者更專注于實現(xiàn)業(yè)務(wù)邏輯和服務(wù)化2021-11-11
這篇文章主要介紹了React 18版本配置rem 和 vw的詳細(xì)步驟,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
使用react-native-image-viewer實現(xiàn)大圖預(yù)覽
這篇文章主要介紹了使用react-native-image-viewer實現(xiàn)大圖預(yù)覽，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
React 中常用的幾種路由跳轉(zhuǎn)方式小結(jié)
基本路由跳轉(zhuǎn)是最常見的一種方式,下面介紹React 中常用的幾種路由跳轉(zhuǎn)方式,感興趣的朋友一起看看吧2023-12-12
解決React報錯Expected?`onClick`?listener?to?be?a?function
這篇文章主要為大家介紹了React報錯Expected?`onClick`?listener?to?be?a?function解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了React?時間切片理解分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要給大家介紹了關(guān)于React如何將組件渲染到指定DOM節(jié)點的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)下吧。2017-09-09
這篇文章主要介紹了react-rnd靠右顯示的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-05-05