在react项目中引入react文件

背景

     	在做毕业设计时，需要使用蚂蚁金服的react组件，所以要在react项目中引入less文件，而react脚手架本身不支持.less文件的引入。
	而因为react版本的更新，修改.less文件的支持的位置也会发生改变。

步骤

第一步

	//第一步，新建一个react项目
	  create-react-app my-app
	//第二步，释放配置文件
	  yarn eject

第二步

下载less和less-loader，这是项目能够识别less文件的关键。（也可以在yarn eject之前进行）

	  //下载less和less-loader
	  yarn add less less-loader

第三步

在释放出配置文件之后，在项目里面就多出了一个叫做config的文件夹，现在我们需要修改里面的webpack.config.js文件。这个是2019年脚手架更新后的新的特性，不同于之前的config文件。

找到第38行修改的代码如下

//改之前
const cssRegex = /\.css$/;

//改之后
const cssRegex = /\.(css|less)$/;

在103行逗号后面加上这句话

	{
    loader : require.resolve('less-loader')
    }

第四步

	重新启动项目

就这么多了，谢谢观看。