一、配置less

在配置less之前，我使用create-react-app，得到React版本为^16.8.6。

  1. 安装依赖并解构目录：（可以在命令前加sudo确保不会出现权限问题）
yarn add babel-plugin-import 或 npm install babel-plugin-import
yarn less-loader 或 npm install less-loader
yarn eject 或 npm run eject

解构后，我得到的webpack版本为4.28.3，config文件夹长这样：

于是，打开webpack.config.js修改配置：
在第42行附近修改代码为：

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

在第327行附近修改代码为：

oneOf: [    {        ...//其他配置    }，    ...//其他配置        //配置less-loader（新增）    {      test: lessRegex,      exclude: lessModuleRegex,      use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),    },    {      test: lessModuleRegex,      use: getStyleLoaders(        {          importLoaders: 2,          modules: true,          getLocalIdent: getCSSModuleLocalIdent,        },        'less-loader'      ),    },    //EndOf配置less-loader（新增）        ...//其他配置]

二、配置antd定制主题

修改package.json：

"babel": {    "presets": [      "react-app"    ],    "plugins": [      [        "@babel/plugin-proposal-decorators",        {          "legacy": true        }      ],      [        "@babel/plugin-proposal-class-properties",        {          "loose": true        }      ],      [        "import",        {          "libraryName": "antd",          "libraryDirectory": "es",          "style": true    //这里是 true 不是 'css'        }      ]    ]  }

在webpack.config.js第110行附近修改代码为：

if (preProcessor) {  let loader = {    loader: require.resolve(preProcessor),    options: {      sourceMap: isEnvProduction && shouldUseSourceMap,    }  }  if (preProcessor === "less-loader") {    //新增    loader.options.modifyVars = {      'primary-color': '#1DA57A',      'link-color': '#1DA57A',      'border-radius-base': '2px'    }    loader.options.javascriptEnabled = true  }    //EndOf新增  loaders.push(loader);}

最后，看到按钮变色就是成功啦！更多样式修改可以看文档~

完~若有不足，请多指教，万般感谢！