使用create-react-app创建的项目默认是不支持less写法的，所以需要配置webpack 配置webpack有两种方式，一种是将配置文件暴露，一种是可以使用customize-cra在不暴露配置文件的情况下自定义配置。

方式一：暴露配置文件

一、创建项目

npx create-react-app my-app

二、暴露配置文件

命令行输入 npm run eject 命令（这个命令在package.json的scripts中可以找到）

三、修改webpack.config.js文件

通过第一步，在根目录下新生成了一个的config文件，里面有一个webpack.config.js文件

搜索sassRegex，然后模仿它声明lessRegex和lessMduleRegex
继续搜索sassRegex，找到下一处代码，将sass修改为less后添加在后面

{ 
  test: lessRegex, 
  exclude: lessModuleRegex, 
  use: getStyleLoaders( 
    { 
      importLoaders: 3, 
      sourceMap: isEnvProduction 
        ? shouldUseSourceMap 
        : isEnvDevelopment, 
      modules: { 
        mode: 'icss', 
      }, 
    }, 
    'less-loader' 
  ), 
  sideEffects: true, 
  }, 
  { 
    test: lessModuleRegex, 
    use: getStyleLoaders( 
    { 
      importLoaders: 3, 
      sourceMap: isEnvProduction 
        ? shouldUseSourceMap 
        : isEnvDevelopment, 
      modules: { 
        mode: 'local', 
        getLocalIdent: getCSSModuleLocalIdent, 
      }, 
    }, 
    'less-loader' 
  ), 
}

四、安装less和less-loader

npm install less less-loader

方式二：使用customize-cra

一、安装

npm install customize-cra react-app-rewired less less-loader -D

二、在根目录下新建一个config-overrides.js文件

const { override, addLessLoader } = require("customize-cra") 
module.exports = override( 
  addLessLoader() 
)

// 如果报错了有两种解决方案，选一种即可
// 方案一：
const { override, addLessLoader, adjustStyleLoaders } = require('customize-cra')
module.exports = override(
  // 支持less
  addLessLoader(),
  adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
  }),
)

// 方案二：
const { override, addWebpackModuleRule } = require('customize-cra') 
module.exports = override( 
  addWebpackModuleRule({ 
    test: [/\.css$/, /\.less$/], 
    use: ['style-loader', 'css-loader', 'postcss-loader', { loader: 'less-loader' }] 
  }) 
)

三、修改package.json

"scripts": { 
  // "start": "react-scripts start", 
  "start": "react-app-rewired start", 
  // "build": "react-scripts build", 
  "build": "react-app-rewired build", 
  // "test": "react-scripts test", 
  "test": "react-app-rewired test", 
}

React项目支持less写法(Webpack)