在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来解析。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。