在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>
   

5. 查看控制台的样式文件
   

结果中可以看到class已经被解析成了乱七八糟，这种，解决了全局污染的问题了吧。

可能的问题

如果你出现了引入.less文件，但是打印出来发现是空的

import lessModules from 'index.module.less'

console.log(lessModules) // {}

那就要去看看你的webpack.config.js文件，这里是否添加了exclude项

这句配置项，是需要把我们想要css modules处理的样式文件不经过普通的.less文件解析，而使用下面的css module来解析。