React導(dǎo)入less及其注意事項說明
更新時間：2024年11月08日 11:28:50 作者：帥氣的小蘇
在Vite構(gòu)建的React項目中,直接安裝和導(dǎo)入Less即可使用,但需注意的是,Less的樣式作用域不局限于模塊內(nèi)部,可能造成樣式污染,建議通過修改文件名和導(dǎo)入方式來避免此問題
React導(dǎo)入less及注意事項
首先我們肯定要下載一下 less，這里我是用 vite 構(gòu)建的 react 項目，由于 vite 已經(jīng)內(nèi)置了對 less 配置，所以下載完直接導(dǎo)入就行
> npm i less
這時候我們就可以十分愉悅地使用 less 了嗎？
請看一個小例子
這里我創(chuàng)建了兩個 tsx 模塊，分別為 computer 和 test，
在 computer 里，我引入了相應(yīng)的 computer 的 less，而 test 的 jsx 沒有
并且將兩個模塊導(dǎo)入到 APP.
tsx，當(dāng)我們運行項目的時候，發(fā)生了一些意想不到的情況，
我在 computer 模塊寫的樣式,為什么會在 test 模塊中出現(xiàn)呢。
從這里可以看出，computer 的 less 的作用域并沒限定在模塊之內(nèi)，而是造成了污染，
此時我們應(yīng)該這么做，將less的文件名改變成這樣
然后改變computer中的引入
這樣子就可以啦。
這里插一句，scss的導(dǎo)入也是一樣的.
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
本文主要介紹了React中前端路由的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家介紹了React大屏可視化腳手架教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
react項目使用json-server模擬接口獲取數(shù)據(jù)的操作方法
文章介紹了如何在React項目中使用json-server模擬接口并獲取數(shù)據(jù),首先安裝json-server,創(chuàng)建JSON格式的數(shù)據(jù)文件,并在package.json中添加啟動命令,啟動服務(wù)后,可以通過指定的路徑獲取模擬的數(shù)據(jù),感興趣的朋友一起看看吧2025-11-11
這篇文章主要介紹了React組件渲染后對DOM的操作方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
使用VScode 插件debugger for chrome 調(diào)試react源碼的方法
這篇文章主要介紹了使用VScode 插件debugger for chrome 調(diào)試react源碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家介紹了React?Suspense解決競態(tài)條件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
本文主要介紹了React 三大核心屬性，主要包括State屬性，Props屬性，Refs屬性，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
本文主要介紹了React使用Redux實現(xiàn)組件通信的項目實踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
這篇文章主要為大家介紹了Header組件熱門搜索欄的實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04