在react中對less實(shí)現(xiàn)scoped配置方式
介紹
我們知道CSS是網(wǎng)頁樣式的一種描述方法。
習(xí)慣了使用Vue項(xiàng)目中樣式文件強(qiáng)大的scoped屬性限制，差點(diǎn)忘記了CSS的規(guī)則是全局的，任何一個組件的樣式規(guī)則都會對整個頁面有效。
最近在開始一個React的項(xiàng)目，就需要項(xiàng)目中的樣式內(nèi)容也能像Vue中的樣式那樣，只對某個文件或者某個DOM有效，避免全局樣式文件的污染。
那么問題來了，在create-react-app創(chuàng)建的React項(xiàng)目中，如何使用Webpack配置css modules呢？
使用
1.配置webpack.config.js
詳情參考ant.d主題換膚。
其中
const lessRegex = /\.less$/ const lessModuleRegex = /\.module\.less$/;
2.引入
在需要使用的文件中引入index.module.less文件，注意，這里的樣式文件后綴必須是module.less，因?yàn)槲覀冊?code>webpack.config.js中配置的正則檢測就是/\.module\.less$/
3.樣式內(nèi)容
// index.module.less
.testModule{
background: blue;
width: 20px;
height: 14px;
}
4.className使用
// index.js
import lessModule from './index.module.less'
<div className={lessModule.testModule}></div>
查看控制臺的樣式文件
結(jié)果中可以看到class已經(jīng)被解析成了亂七八糟，這種，解決了全局污染的問題了吧。
可能的問題
如果你出現(xiàn)了引入.less文件，但是打印出來發(fā)現(xiàn)是空的
import lessModules from 'index.module.less'
console.log(lessModules) // {}
那就要去看看你的webpack.config.js文件，這里是否添加了exclude項(xiàng)
這句配置項(xiàng)，是需要把我們想要css modules處理的樣式文件不經(jīng)過普通的.less文件解析，而使用下面的css module來解析。
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
實(shí)現(xiàn)react時間分片，主要內(nèi)容包括什么是時間分片、為什么需要時間分片、實(shí)現(xiàn)分片開啟 - 固定、實(shí)現(xiàn)分片中斷、重啟 - 連續(xù)、分片重啟、實(shí)現(xiàn)延遲執(zhí)行 - 有間隔、時間分片異步執(zhí)行方案的演進(jìn)、時間分片簡單實(shí)現(xiàn)、總結(jié)、基本概念、基礎(chǔ)應(yīng)用、原理機(jī)制和需要注意的事項(xiàng)等2022-11-11
useEffect()是react中的hook函數(shù),作用是用于創(chuàng)建由渲染本身引起的操作,介紹了依賴項(xiàng)數(shù)組不同的區(qū)別,對react useEffect()使用相關(guān)知識感興趣的朋友一起看看吧2024-05-05
React替換傳統(tǒng)拷貝方法的Immutable使用
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來減少內(nèi)存占用2023-02-02
這篇文章主要介紹了React SSR樣式及SEO的實(shí)踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
React實(shí)現(xiàn)組件間通信的幾種方式小結(jié)
在React應(yīng)用中,組件間的通信是一個基礎(chǔ)而關(guān)鍵的概念,理解和掌握不同組件之間的通信方式,可以幫助我們構(gòu)建出更加模塊化、可維護(hù)和可擴(kuò)展的應(yīng)用程序,React提供了多種組件通信的方法,本文給大家詳細(xì)的介紹了這些方法,需要的朋友可以參考下2024-07-07
React使用Electron開發(fā)桌面端的詳細(xì)流程步驟
React是一個流行的JavaScript庫，用于構(gòu)建Web應(yīng)用程序，結(jié)合Electron框架，可以輕松地將React應(yīng)用程序打包為桌面應(yīng)用程序，本文詳細(xì)介紹了使用React和Electron開發(fā)桌面應(yīng)用程序的步驟,需要的朋友可以參考下2023-06-06
本篇文章主要介紹了React Native 截屏組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Redux是JavaScript狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理，今天通過本文給大家分享redux在react中使用及配置redux到react項(xiàng)目中的方法，感興趣的朋友跟隨小編一起看看吧2021-06-06
本篇文章主要介紹了淺談react前后端同構(gòu)渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了React優(yōu)雅的封裝SvgIcon組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02