Antd 按需加载、定制主题

1. 创建react项目

2. 引入antd

// cnpm i antd -S

3. 引入插件、配置package.json、创建config-overrides.js

cnpm i babel-plugin-import -S  // 按需加载
cnpm i react-app-rewired customize-cra -S

// config-overrides.js
const {
          
    override, fixBabelImports, addLessLoader } = require(customize-cra);
const abc = require(./src/abc)
console.log(abc)
module.exports = override(
    fixBabelImports(import, {
          
   
        libraryName: antd,
        libraryDirectory: es,
        style: true,
    }),
    addLessLoader({
          
   
        javascriptEnabled: true,
        modifyVars: {
          
    
            ...abc
        },
    }),
);

// package.json
"scripts": {
          
   
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },

// abc.js  (src 跟目录)
module.exports = {
          
   
    @primary-color: #FF0000,
    @table-bg: #FFC0CB,
}