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

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

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

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

2.CSS Modules使用方法
在webpack.config.js这个文件里增加
create-react-app引入less不生效问题解决
3. 自定义命名规则

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

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