React uses the method of creating projects and using less

Switch the mirror source of npm first, and you can directly execute the next step if the installation is fast

 npm config set registry https://registry.npm.taobao.org
 npm install -g create-react-app
 create-react-app 你的项目名字

install less

npm install less less-loader

Install and execute

npm run eject

Find the webpack.config.js file plus

// style files regexes
const cssRegex = /\.css\$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

Find the configuration items of cssRegex and sassRegex in the file plus

 // Less 解析配置
  {
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true
      },
      "less-loader"
    ),
    sideEffects: true,
  },
   {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        "less-loader"
      ),
    },

At this time, our react project can use less.
Thanks to create-react-app for supporting the article of less stepping on the pit