react16.8 按需引入antd+自定义theme

一、配置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文件夹长这样：

image.png

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

// 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$/;    //新增

在第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": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true    //这里是 true 不是 'css'
        }
      ]
    ]
  }

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

image.png

if (preProcessor) {
      let loader = {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap
        }
      };
      if (preProcessor === "less-loader") {
        loader = {
          ...loader,
          options: {
            modifyVars: {
              //自定义主题
              "primary-color": " #1890ff",
              'border-radius-base': '2px'
            },
            javascriptEnabled: true
          }
        };
      }
      loaders.push(loader);
    }

更多样式修改可以看文档~