在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è)面有效。
最近在開(kāi)始一個(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)文章
這篇文章主要給大家介紹了關(guān)于React獲取input值并提交的2種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家介紹了python的函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼
隨著業(yè)務(wù)的發(fā)展，每一個(gè) React Native 應(yīng)用的代碼數(shù)量都在不斷增加。作為一個(gè)前端想到的方案自然就是動(dòng)態(tài)導(dǎo)入（Dynamic import）了，本文介紹了React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼，需要的可以參考一下2022-06-06
React中定義一個(gè)組件,可以通過(guò)ES6版本以前的React.createClass或者ES6的class xxx extends React.Component,綁定this是react中非常重要的一部分,React中,綁定this的方式有多種,下面一一看看怎么進(jìn)行this綁定并給函數(shù)傳參,需要的朋友可以參考下2025-07-07
React中使用Echarts無(wú)法顯示title、tooltip等組件的解決方案
這篇文章主要介紹了React中使用Echarts無(wú)法顯示title、tooltip等組件的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React函數(shù)式組件和類式組件詳情，React是組件化的的JS庫(kù)，組件化也是React的核心思想，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
一文詳解如何使用React監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)
在現(xiàn)代Web應(yīng)用程序中，網(wǎng)絡(luò)連接是至關(guān)重要的，通過(guò)監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)，我們可以為用戶提供更好的體驗(yàn)，例如在斷網(wǎng)時(shí)顯示有關(guān)網(wǎng)絡(luò)狀態(tài)的信息，本文將介紹如何使用React監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)的變化，并提供相應(yīng)的代碼示例2023-06-06
這篇文章主要介紹了React圖片壓縮上傳統(tǒng)一處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
flouting?ui定位組件完美替代ant?deisgn使用詳解
這篇文章主要為大家介紹了flouting?ui定位組件完美替代ant?deisgn使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
具體來(lái)說(shuō)這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來(lái)實(shí)現(xiàn)。下面就說(shuō)說(shuō)這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧2023-01-01