create-react-app引入less不生效问题解决

react

1. CSS Modules引入目的

　　写过CSS的人，应该都对一大长串选择器选中一个元素不陌生吧，这种方式，其实定义的就是全局样式，我们时常会因为选择器权重问题，没有把我们想要的样式加上去。

另外，每次都需要把所有的样式表都导入到程序中，如果我们可以像使用js模块一样，想用哪块就用哪块，是不是就很理想了。

CSS Modules就解决了这个问题，它自动为每一个类生成一个哈希值，可以惟一标志这个类，因此避免了我们说的第一个问题，它让我们可以像使用js模块那样，想用哪部分样式，就引入哪部分样式。下面我们来具体介绍它的使用方法。

2.CSS Modules使用方法

在webpack.config.js这个文件里增加

3. 自定义命名规则

上面生称的类名，完全是自动生成，如果自己自己规定命名规则呢，也是很简单的，只需要在上面配置modules后面添加&localIdentName＝配置规则，如：

‘css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]’ //style__bgRed-2R9YN,local对应所在文件夹名，local对应文件名，最后是哈希值