在react中對less實現(xiàn)scoped配置方式

更新時間：2023年11月14日 14:53:16 作者：土豆Coder

這篇文章主要介紹了在react中對less實現(xiàn)scoped配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

介紹

我們知道CSS是網(wǎng)頁樣式的一種描述方法。

習慣了使用Vue項目中樣式文件強大的scoped屬性限制，差點忘記了CSS的規(guī)則是全局的，任何一個組件的樣式規(guī)則都會對整個頁面有效。

最近在開始一個React的項目，就需要項目中的樣式內(nèi)容也能像Vue中的樣式那樣，只對某個文件或者某個DOM有效，避免全局樣式文件的污染。

那么問題來了，在create-react-app創(chuàng)建的React項目中，如何使用Webpack配置css modules呢？

使用

1.配置webpack.config.js

詳情參考ant.d主題換膚。

其中

const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/;

2.引入

在需要使用的文件中引入index.module.less文件，注意，這里的樣式文件后綴必須是module.less，因為我們在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項

這句配置項，是需要把我們想要css modules處理的樣式文件不經(jīng)過普通的.less文件解析，而使用下面的css module來解析。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

react時間分片實現(xiàn)流程詳解
實現(xiàn)react時間分片，主要內(nèi)容包括什么是時間分片、為什么需要時間分片、實現(xiàn)分片開啟 - 固定、實現(xiàn)分片中斷、重啟 - 連續(xù)、分片重啟、實現(xiàn)延遲執(zhí)行 - 有間隔、時間分片異步執(zhí)行方案的演進、時間分片簡單實現(xiàn)、總結(jié)、基本概念、基礎(chǔ)應(yīng)用、原理機制和需要注意的事項等
2022-11-11
react中的useEffect()的使用詳解
useEffect()是react中的hook函數(shù),作用是用于創(chuàng)建由渲染本身引起的操作,介紹了依賴項數(shù)組不同的區(qū)別,對react useEffect()使用相關(guān)知識感興趣的朋友一起看看吧
2024-05-05
React替換傳統(tǒng)拷貝方法的Immutable使用
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實現(xiàn)之一。它實現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來減少內(nèi)存占用
2023-02-02
React SSR樣式及SEO的實踐
這篇文章主要介紹了React SSR樣式及SEO的實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
React實現(xiàn)組件間通信的幾種方式小結(jié)
在React應(yīng)用中,組件間的通信是一個基礎(chǔ)而關(guān)鍵的概念,理解和掌握不同組件之間的通信方式,可以幫助我們構(gòu)建出更加模塊化、可維護和可擴展的應(yīng)用程序,React提供了多種組件通信的方法,本文給大家詳細的介紹了這些方法,需要的朋友可以參考下
2024-07-07
React使用Electron開發(fā)桌面端的詳細流程步驟
React是一個流行的JavaScript庫，用于構(gòu)建Web應(yīng)用程序，結(jié)合Electron框架，可以輕松地將React應(yīng)用程序打包為桌面應(yīng)用程序，本文詳細介紹了使用React和Electron開發(fā)桌面應(yīng)用程序的步驟,需要的朋友可以參考下
2023-06-06
React Native 截屏組件的示例代碼
本篇文章主要介紹了React Native 截屏組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
一文搞懂redux在react中的初步用法
Redux是JavaScript狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理，今天通過本文給大家分享redux在react中使用及配置redux到react項目中的方法，感興趣的朋友跟隨小編一起看看吧
2021-06-06
淺談react前后端同構(gòu)渲染
本篇文章主要介紹了淺談react前后端同構(gòu)渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
React優(yōu)雅的封裝SvgIcon組件示例
這篇文章主要為大家介紹了React優(yōu)雅的封裝SvgIcon組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02