antd按需引入 + 自定义主题

//1.安装依赖 npm add react-app-rewired customize-cra babel-plugin-import less less-loader

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

//3.根目录中创建config-overrides.js(package.json的同级目录)

const {override, fixBabelImports, addLessLoader} = require("customize-cra");
module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: true
    }),
   addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: { "@primary-color": "orange"}    // 将antd中的主颜色蓝色改变为橙色
        }
    })
);
 
//4.删除组建中引入的样式的代码 即: import "antd/dist/antd.css"

上一篇:antd vue递归表单键值对无效


下一篇:如何实现 antd table 自动调整可视高度(纵向滚动条,scrollY)