React UI组件库之快速实现antd的按需引入和自定义主题

npm install antd --save
yarn add antd

import { Button, DatePicker } from 'antd';

import { WechatOutlined, SearchOutlined } from '@ant-design/icons';

import 'antd/dist/antd.css';

npm add react-app-rewired customize-cra

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

// 配置具体的修改规则
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

npm add babel-plugin-import

// 配置具体的修改规则
const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
);

npm add less@5 
npm add less-loader@5
// npm add less less-loader@5

// 配置具体的修改规则
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': 'green' },
  }),
);