在react中对less实现scoped配置方式
更新时间：2023年11月14日 14:53:16 作者：土豆Coder
这篇文章主要介绍了在react中对less实现scoped配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
介绍
我们知道CSS是网页样式的一种描述方法。
习惯了使用Vue项目中样式文件强大的scoped属性限制，差点忘记了CSS的规则是全局的，任何一个组件的样式规则都会对整个页面有效。
最近在开始一个React的项目，就需要项目中的样式内容也能像Vue中的样式那样，只对某个文件或者某个DOM有效，避免全局样式文件的污染。
那么问题来了，在create-react-app创建的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.样式内容
// 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>
查看控制台的样式文件
结果中可以看到class已经被解析成了乱七八糟，这种，解决了全局污染的问题了吧。
可能的问题
如果你出现了引入.less文件，但是打印出来发现是空的
import lessModules from 'index.module.less'
console.log(lessModules) // {}
那就要去看看你的webpack.config.js文件，这里是否添加了exclude项
这句配置项，是需要把我们想要css modules处理的样式文件不经过普通的.less文件解析，而使用下面的css module来解析。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
实现react时间分片，主要内容包括什么是时间分片、为什么需要时间分片、实现分片开启 - 固定、实现分片中断、重启 - 连续、分片重启、实现延迟执行 - 有间隔、时间分片异步执行方案的演进、时间分片简单实现、总结、基本概念、基础应用、原理机制和需要注意的事项等2022-11-11
useEffect()是react中的hook函数,作用是用于创建由渲染本身引起的操作,介绍了依赖项数组不同的区别,对react useEffect()使用相关知识感兴趣的朋友一起看看吧2024-05-05
Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用2023-02-02
这篇文章主要介绍了React SSR样式及SEO的实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
在React应用中,组件间的通信是一个基础而关键的概念,理解和掌握不同组件之间的通信方式,可以帮助我们构建出更加模块化、可维护和可扩展的应用程序,React提供了多种组件通信的方法,本文给大家详细的介绍了这些方法,需要的朋友可以参考下2024-07-07
React是一个流行的JavaScript库，用于构建Web应用程序，结合Electron框架，可以轻松地将React应用程序打包为桌面应用程序，本文详细介绍了使用React和Electron开发桌面应用程序的步骤,需要的朋友可以参考下2023-06-06
本篇文章主要介绍了React Native 截屏组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
Redux是JavaScript状态容器，提供可预测化的状态管理，今天通过本文给大家分享redux在react中使用及配置redux到react项目中的方法，感兴趣的朋友跟随小编一起看看吧2021-06-06
本篇文章主要介绍了浅谈react前后端同构渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家介绍了React优雅的封装SvgIcon组件示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
最新评论