使用create-react-app 创建的工程，并且配置支持less的方式

一、create-react-app简介

使用create-react-app，会创建一个初始项目，并且会内置基本的webpack配置

二、如何使用脚手架构建项目

如果你已经安装了脚手架，并且可以构建项目，你可以略过这里
1.首先-全局安装脚手架 ；npm i create-react-app -g

2.安装yarn；npm i yarn -g

3.验证脚手架是否安装成功；create-react-app --version或create-react-app -V

4.构建一个React项目；create-react-app <你的项目名>

5.我使用create-react-app csdn-demo创建了一个名为csdn-demo的项目,如下所示(我的脚手架版本为v3.3.0)
6.启动项目yarn start或npm start；
7.到这里你已经学会如何使用脚手架创建项目了

三、为何要配置less支持

自然有less的好处，这是其一，而且我们开发的时候可能大都会运用antd(ant design的缩写)一款阿里开源的React组件库,该组件库使用less

安装antdyarn add antd

四、配置方式

不管什么配置方法，配置之前，都需要有less，less-loader插件.

执行yarn add less less-loader

1、第一种配置方法

webpack.config.js文件夹可以配置很多支持，但是刚构建的项目是看不到webpack配置的,因此我们需要在工程目录下暴露出webpack配置

1.运行npm run eject，会提示不可逆，选择y，稍后即可看多出很多东西

2.选择config目录下的 webpack.config.js,添加下列代码进去

           //less配置
            {
              test: /\.less$/,
              //include: paths.appSrc,
              use: [{
                loader: "style-loader" // creates style nodes from JS strings
              }, {
                loader: "css-loader" // translates CSS into CommonJS
              }, {
                loader: "less-loader",// compiles Less to CSS
                options: {
                  sourceMap: true,
                  //自定义配置主题
                   modifyVars: {
                    'primary-color': 'blue',
                    'link-color': 'black'
                   /*  'border-radius-base': '2px', */
                  }, 
                  javascriptEnabled: true,
                }
              }]
            }

我给大家添加一个位置图示:如下

3.重启项目，到这里项目就支持less了

2、第二种配置方法

覆盖默认配置的方法，无需eject暴露出所有的配置(推荐)

1.添加插件 ；yarn add react-app-rewired customize-cra
2.在项目根目录新建config-overrides.js，填入以下代码

const {override,addLessLoader}=require('customize-cra')
module.exports = override(
    addLessLoader({
        javascriptEnabled: true
    })
);

3.重启项目,到这里已经支持less了，这种方式是不是更简便呢