React 集成 less & AntD / 按需加载组件 + 定制主题

1. 安装 less、less-loader 和 antd

yarn add less less-loader antd

2. 安装 react-app-rewired、customize-cra 和 babel-plugin-import

yarn add react-app-rewired customize-cra babel-plugin-import

# 使用less-loader@6.0.0
yarn add react-app-rewired customize-cra@next babel-plugin-import

3. 配置 package.json

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

4. 在项目根目录创建一个 config-overrides.js 用于修改默认配置

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('antd', {
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1DA57A' },
    },
  }),
);

5. Test.js

import React, { Component } from 'react';
import { Button } from 'antd';

class Test extends Component {
  render() {
    return (
      <div>
        <Button type="primary">AntD Button</Button>
      </div>
    );
  }
}

export default Test;

如果看到一个绿色的按钮就说明配置成功了。