react使用创建项目以及使用less的方法

先切换 npm 的镜像源 ，安装快的可以直接执行下一步

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

安装less

npm install less less-loader

安装好 执行

npm run eject

找到webpack.config.js文件加上

// 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)$/;

找到文件中cssRegex 和 sassRegex的配置项 加上

 // 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"
      ),
    },

这时我们的react项目就可以使用less了
感谢create-react-app 支持less踩坑的文章