react脚手架安装，以及less插件配置

一、react脚手架的安装

1. 安装命令：
   npm i -g create-react-app
2. 在你希望项目出现的目录下,打开cmd
   create-react-app 项目名
   例如: create-react-app react-app
3. 运行命令: 到项目目录下执行
   npm start

二、安装less插件及配置

1. 安装less
   npm install less-loader
   npm install less

2. 先将项目初始化，并暂存仓库，否则执行第三步会报错
   git init //初始化
   git add ./ //将所有的文件添加
   git commit -m ‘项目初始化’ //提交说明（这是暂存本地仓库)

3. 将配置文件暴露出来
   npm run eject
   会有询问弹出，选择 y 运行成功后，项目会多出许多配置文件

4. 找到项目中新出现的config文件夹下的webpack.config.js文件，进行less配置
   

5. 找到如下位置
   
   新增加两行：
   const lessRegex = /.less$/;

   const lessModuleRegex = /.module.less$/;
   如下图所示：
   

6. 找到如下位置
   
   新增加以下代码

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders({
    importLoaders: 2,
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders({
    importLoaders: 2,
    modules: true,
    getLocalIdent: getCSSModuleLocalIdent,
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
    'less-loader'
  ),
},

如下图所示：

9. 新建less文件
   

10. 在js文件中引入
    

现在项目就可以正常使用less预编译了