react中引入less并支持antd主題換膚方式
更新時間：2024年01月24日 10:24:25 作者：土豆Coder
這篇文章主要介紹了react中引入less并支持antd主題換膚方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
介紹
antd的樣式使用了Less作為開發(fā)語言，并定義了一系列全部的樣式變量，我們可以改變對應變量值來進行相應調整換膚。
react中引入less
要修改webpack配置，首先需要將webpack的配置文件先暴露出來
npm run eject
安裝依賴包
npm i less less-loader
然后修改eject出來的webpack.config.js文件
antd主題換膚
修改上面的配置
其中vars.less文件內容為
// 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",
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解react-refetch的使用小例子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Native?Memory?Tracking追蹤區(qū)域示例分析
這篇文章主要為大家介紹了Native?Memory?Tracking追蹤區(qū)域示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了react-dnd?API拖拽工具的詳細用法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
React使用context進行跨級組件數(shù)據(jù)傳遞
這篇文章給大家介紹了React使用context進行跨級組件數(shù)據(jù)傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細,對大家學習React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學習吧2024-01-01
react component changing uncontrolled in
這篇文章主要為大家介紹了react component changing uncontrolled input報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了React 使用Hooks簡化受控組件的狀態(tài)綁定，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了淺談react-router@4.0 使用方法和源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
React + webpack 環(huán)境配置的方法步驟
本篇文章主要介紹了React + webpack 環(huán)境配置的方法步驟，詳解的介紹了開發(fā)環(huán)境的配置搭建，有興趣的可以了解一下2017-09-09
這篇文章主要為大家詳細介紹了如何在React中實現(xiàn)插槽，文中的示例代碼講解詳細，對我們的學習或工作具有一定的借鑒價值，需要的可以了解一下2023-03-03
reactjs學習解決unknown at rule @tailwind css
這篇文章主要介紹了reactjs學習解決unknown at rule @tailwind css問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02