create-react-app & antd

React中使用create-react-app以及antd页面基本搭建
React设置antd3x自定义主题，TypeError: this.getOptions is not a function的解决方法
react-app-rewired
antd-在 create-react-app 中使用

yarn create react-app xxxx --template typescript

less-loader@7.0.0

yarn add antd babel-plugin-import customize-cra less less-loader@7.0.0 react-app-rewired

package.json

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

根目录新建

config-overrides.js

覆盖CRA webpack配置

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

module.exports = override(
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useBabelRc(),
    addWebpackAlias({
        "@": path.resolve(__dirname, "src"),
        page: path.resolve(__dirname, "src/page"),
    }),
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        //改主题颜色
        // 默认：⬇️
        // @blue-base: #1890ff;
        // @blue-6: @blue-base;
        // @primary-color: @blue-6;
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                "@primary-color": "#51f",
            },
        },
    })
);