react中引入less并支持antd主題換膚方式
更新時(shí)間：2024年01月24日 10:24:25 作者：土豆Coder
這篇文章主要介紹了react中引入less并支持antd主題換膚方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
介紹
antd的樣式使用了Less作為開(kāi)發(fā)語(yǔ)言，并定義了一系列全部的樣式變量，我們可以改變對(duì)應(yīng)變量值來(lái)進(jìn)行相應(yīng)調(diào)整換膚。
react中引入less
要修改webpack配置，首先需要將webpack的配置文件先暴露出來(lái)
npm run eject
安裝依賴(lài)包
npm i less less-loader
然后修改eject出來(lái)的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文件中直接引用，且無(wú)需再import該文件。
另外，除了加載指定路徑外，也可以直接覆蓋主題變量，同樣生效。
{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader',
options: {
modifyVars: {
'primary-color': '#0f0'
}
}
}]
},
報(bào)錯(cuò)1
那一定是你的路徑寫(xiě)的不對(duì)，好好檢查一下。
版本號(hào)
因?yàn)檫@些個(gè)依賴(lài)總是隨時(shí)更新，然而每次更新都會(huì)出現(xiàn)新的報(bào)錯(cuò)，也不給出個(gè)具體方案，所以這里的版本號(hào)請(qǐng)參考下表
// package.json "antd": "^4.0.1", "less": "2.7.2", "less-loader": "^5.0.0", "react": "^16.13.0",
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解react-refetch的使用小例子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
Native?Memory?Tracking追蹤區(qū)域示例分析
這篇文章主要為大家介紹了Native?Memory?Tracking追蹤區(qū)域示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了react-dnd?API拖拽工具的詳細(xì)用法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React使用context進(jìn)行跨級(jí)組件數(shù)據(jù)傳遞
這篇文章給大家介紹了React使用context進(jìn)行跨級(jí)組件數(shù)據(jù)傳遞的方法步驟,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來(lái)學(xué)習(xí)吧2024-01-01
react component changing uncontrolled in
這篇文章主要為大家介紹了react component changing uncontrolled input報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React 使用Hooks簡(jiǎn)化受控組件的狀態(tài)綁定
這篇文章主要介紹了React 使用Hooks簡(jiǎn)化受控組件的狀態(tài)綁定，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要介紹了淺談react-router@4.0 使用方法和源碼分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
React + webpack 環(huán)境配置的方法步驟
本篇文章主要介紹了React + webpack 環(huán)境配置的方法步驟，詳解的介紹了開(kāi)發(fā)環(huán)境的配置搭建，有興趣的可以了解一下2017-09-09
這篇文章主要為大家詳細(xì)介紹了如何在React中實(shí)現(xiàn)插槽，文中的示例代碼講解詳細(xì)，對(duì)我們的學(xué)習(xí)或工作具有一定的借鑒價(jià)值，需要的可以了解一下2023-03-03
reactjs學(xué)習(xí)解決unknown at rule @tailwind css
這篇文章主要介紹了reactjs學(xué)習(xí)解決unknown at rule @tailwind css問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02