React導入less及其注意事項說明
更新時間：2024年11月08日 11:28:50 作者：帥氣的小蘇
在Vite構建的React項目中,直接安裝和導入Less即可使用,但需注意的是,Less的樣式作用域不局限于模塊內部,可能造成樣式污染,建議通過修改文件名和導入方式來避免此問題
React導入less及注意事項
首先我們肯定要下載一下 less，這里我是用 vite 構建的 react 項目，由于 vite 已經內置了對 less 配置，所以下載完直接導入就行
> npm i less
這時候我們就可以十分愉悅地使用 less 了嗎？
請看一個小例子
這里我創(chuàng)建了兩個 tsx 模塊，分別為 computer 和 test，
在 computer 里，我引入了相應的 computer 的 less，而 test 的 jsx 沒有
并且將兩個模塊導入到 APP.
tsx，當我們運行項目的時候，發(fā)生了一些意想不到的情況，
我在 computer 模塊寫的樣式,為什么會在 test 模塊中出現(xiàn)呢。
從這里可以看出，computer 的 less 的作用域并沒限定在模塊之內，而是造成了污染，
此時我們應該這么做，將less的文件名改變成這樣
然后改變computer中的引入
這樣子就可以啦。
這里插一句，scss的導入也是一樣的.
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
React Native 真機斷點調試+跨域資源加載出錯問題的解決方法
下面小編就為大家分享一篇React Native 真機斷點調試+跨域資源加載出錯問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家歸納總結了Remix?表單常用方法及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
react開發(fā)中如何使用require.ensure加載es6風格的組件
本篇文章主要介紹了react開發(fā)中如何使用require.ensure加載es6風格的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
react項目升級報錯,babel報錯,.babelrc配置兼容等問題及解決
這篇文章主要介紹了react項目升級報錯,babel報錯,.babelrc配置兼容等問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React18從0實現(xiàn)dispatch?update流程
這篇文章主要為大家介紹了React18從0實現(xiàn)dispatch?update流程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
react-native使用react-navigation進行頁面跳轉導航的示例
本篇文章主要介紹了react-native使用react-navigation進行頁面跳轉導航的示例，具有一定的參考價值，有興趣的可以了解一下2017-09-09
這篇文章主要為大家介紹了React彈窗使用方式NiceModal重新思考分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了詳解一個基于react+webpack的多頁面應用配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
React useContext與useReducer函數組件使用
useContext和useReducer 可以用來減少層級使用, useContext，可以理解為供貨商提供一個公共的共享值，然后下面的消費者去接受共享值，只有一個供貨商，而有多個消費者，可以達到共享的狀態(tài)改變的目的2023-02-02
我們組的前端妹子在組內分享時談到了 react 的鉤子，趁此機會我也對我所理解的內容進行下總結，方便更多的同學了解。在 React 的 v16.8.0 版本里添加了 hooks 的這種新的 API，我們非常有必要了解下他的使用方法，并能夠結合我們的業(yè)務編寫幾個自定義的 hooks。2021-05-05