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