在create-react-app指令创建的react项目中使用less语法

如何在create-react-app创建的项目下配置less，其实很简单，只是create-react-app创建的项目没有暴露webpack相关配置，所以需要暴露出webpack相关配置，具体操作如下：
---------------------------------------------------------------------------;
1.首先首先得初始化一下这个项目,不然等下暴露的时候会报错(血泪教训)

git init 

2.git操作不解释

git add ./

3.git操作不解释

git commit -m "随便写啥"

4.暴露配置文件(会提示你(Y/N)啥的,扣Y就完事了)

 npm run eject

5.修改config文件夹下的webpack.config.js文件(共4处,建议使用CTRL+F快速搜索关键字)

前两处

//找到如下代码

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

//修改为如下代码

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

后两处

//找到这段代码

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true


//修改为如下代码

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
    importLoaders: 2,
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
    'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,

6.安装less相关依赖

npm install less less-loader --save-dev

7.创建less文件,并引入到index.js文件中

8.启动项目

npm start

发现可以成功使用less语法