在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获取input值并提交的2种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要为大家介绍了python的函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
随着业务的发展，每一个 React Native 应用的代码数量都在不断增加。作为一个前端想到的方案自然就是动态导入（Dynamic import）了，本文介绍了React Native中实现动态导入的示例代码，需要的可以参考一下2022-06-06
React中定义一个组件,可以通过ES6版本以前的React.createClass或者ES6的class xxx extends React.Component,绑定this是react中非常重要的一部分,React中,绑定this的方式有多种,下面一一看看怎么进行this绑定并给函数传参,需要的朋友可以参考下2025-07-07
React中使用Echarts无法显示title、tooltip等组件的解决方案
这篇文章主要介绍了React中使用Echarts无法显示title、tooltip等组件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了React函数式组件和类式组件详情，React是组件化的的JS库，组件化也是React的核心思想，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
在现代Web应用程序中，网络连接是至关重要的，通过监听网络状态，我们可以为用户提供更好的体验，例如在断网时显示有关网络状态的信息，本文将介绍如何使用React监听网络状态的变化，并提供相应的代码示例2023-06-06
这篇文章主要介绍了React图片压缩上传统一处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
flouting ui定位组件完美替代ant deisgn使用详解
这篇文章主要为大家介绍了flouting ui定位组件完美替代ant deisgn使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧2023-01-01
最新评论