react中less的css modules配置

介绍

我们知道CSS是网页样式的一种描述方法。习惯了使用Vue项目中样式文件强大的scoped属性限制，差点忘记了CSS的规则是全局的，任何一个组件的样式规则都会对整个页面有效。最近在开始一个React的项目，就需要项目中的样式内容也能像Vue中的样式那样，只对某个文件或者某个DOM有效，避免全局样式文件的污染。那么问题来了，在create-react-app创建的React项目中，如何使用Webpack配置css modules呢？

配置

其实这里是之前一篇文章create-react-app新建项目中配置less的一个更深入的理解。之前只知道删除后面的那段对页面和样式也没有影响，但是没弄明白，既然没有影响，为什么上面的CSS和Sass配置都写了这一段呢？其实，eject出来的webpack.config.js文件有段注释，有提示：

（所以，不要随便忽略大神给你的注释！！！）
废话不多说，先上给less配置的Css modules的内容

其中

const lessModuleRegex = /\.module\.less$/;

test: lessRegex这段在之前的一篇文章中有具体解释，详情参考ant.d主题换肤。

使用

配置好了，下面就是使用问题了

1. 引入

   在需要使用的文件中引入index.module.less文件，注意，这里的样式文件后缀必须是module.less，因为我们在webpack.config.js中配置的正则检测就是/\.module\.less$/

2. 样式内容

   // index.module.less
   .testModule{
     background: blue;
     width: 20px;
     height: 14px;
   }
   

3. className使用

   // index.js
   import lessModule from './index.module.less'
   
   <div className={lessModule.testModule}></div>
   

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

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

可能的问题

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

import lessModules from 'index.module.less

console.log(lessModules) // {}

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

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