在react中识别less
less是什么
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
前言
在facebook官方给出的脚手架中，并不能识别less文件，而我们在使用antd或其他ui框架的时候，使用less会带来很多便捷。最最最糟糕的是: react在不久前进行了一波更新。导致react的配置文件发生了改变，网上的教程都不能使用了。在查找了资料之后我找到了完美的解决方案。
正文
废话不说，咱们进入正题
第一步
首先我们要使用 react 官方的脚手架新建一个项目并释放出它的配置文件
//新建一个叫less 的项目
create-react-app less
//释放出配置文件
yarn eject
特殊说明：
一定要在项目搭建完成之后立刻执行yarn eject
在项目中加入任何文件或者使用webstorm打开都会导致报错
第二步
下载less和less-loader，这是项目能够识别less文件的关键。
//下载less和less-loader
yarn add less less-loader
第三步
在释放出配置文件之后，在项目里面就多出了一个叫做config的文件夹，现在我们需要修改里面的webpack.config.js文件
首先找到第38行，加入less
//改之前
const cssRegex = /\.css$/;
//改之后
const cssRegex = /\.(css|less)$/;
在use数组最后新增一个对象元素{loader: require.resolve('less-loader')}
添加位置：在103行逗号的后面
//在103行的逗号后面添加
{
loader : require.resolve('less-loader')
}
第四步
现在重新启动项目，就会发现现在已经能够识别less文件啦！
