在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文件啦！