react css拓展 使用less

react 之中使用less

其实质只需要看一下resct 使用css的配置项，就能明白个大概了

 第一步  

还是下载

npm i  less less-loader -save 下载less 和 less_loader

第二步

因为使用 create-react-app react脚手架搭建的项目，默认是把配置文件隐藏的  所以需要暴漏它

yarn eject 暴露配置文件 然后终端会询问你是否确认暴漏 y就够了

第三步

打开webpack.config.js 文件

找到使用匹配loader的正则表达式，项目应该都将它们放在一起了,这样也便于修改 照着css的样子添加less

第四步 找到

sassRegex 的配置项，recta 脚手架是默认使用sass的,并且还编写了一些处理loader正则匹配的方法，这个就涉及到webpack的使用了，在此就不多述，感兴趣的朋友可以自己去了解

第五步 仿照sass配置的模板 添加下列配置

保存，重新启动服务 然后就 大功告成了，至于为什么会有一个lessModuleRegex 配置，这是一个关于模块化代码的问题，我的上一边文章会有讲述，

还有一个拓展，当进行开发的时候往往会将一些共有的样式提取出来，放在一个样式文件中，如果每次用到公用样式的地方都需要引用一次样式文件就太麻烦了。所以我们可以这样

先下载

npm i style-resources-loader

然后在刚才我们改动的地方加上

保存 重启服务 就可以愉快的使用lessle