React脚手架less的安装

　　最近在用react.js 结合蚂蚁金服的 Ant Design Mobile 作一个单页面的应用程序，遇到了一个很棘手的问题——那就是 react脚手架不支持less，看了很多优秀博主如何在react脚手架中使用less,,以为繁琐且又不能解决实际问题,因而本身弄明白后感受如此简单,作了这么个教程,避免新手走弯路。

声明一下我用的是微软的代码编辑软件VS code，下面的是详细的图文教程。

前期准备：

经过命令 create-react-app react-demo 建立了本身的React应用并能正常运行。

create-react-app react-demo

下面是如何让react脚手架支持less的图文教程：

step1：首先把本身建立好的项目添加到工做区，若是已添加到工做区，这一步跳过。

step2：在终端安装less 和 less-loader。下面是命令：

 

npm install less less-loader --save-dev

 

step3：点开项目文件夹，并依次找到 node_modules/react-scripts/config/webpack.config.js。以下图被红色选框选中的文件就是咱们须要修改的。

step4(关键)：打开这个文件并添加下面两行代码 

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

如图：

step5(关键)：在这个文件里快捷键Ctrl+F 搜索 sassRege 并复制鼠标选中的代码。

在这个代码块后面换行，粘贴并作部分修改：

修改的地方有三处，以下图我选中的红色选框：

分别替换成 lessRegex, lessModuleRegex, 'less-loader' 并保存 以下图：

 

step6(关键)：和step5同样。快捷键Ctrl+F 搜索 sassModuleRegex 复制鼠标选中的代码：

在这个代码快后面换行，粘贴并作部分修改：

修改的地方有三处，以下图我选中的红色选框：

 

分别替换成  lessRegex、 lessModuleRegex、 less-loader'并保存 以下图：

step6(测试)：

在src下面创建一个style.less文件，代码以下：

@nice-blue:pink;
@light-blue: @nice-blue + #111;
.header { color: @light-blue; }

 

而后把这个 style.less 引入App.js

import './style.less';

在终端敲命令 npm start 完美的运行结果：

这样就解决了React脚手架不支持less的问题。