react antd 主题

./node_modules/antd/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js??

 问题原因：因为我下的react版本是18.2.0 对应的webpack为5.64.4，而在打包的时候webpack5以上版本在打包时对lessoption的选项因为版本有些键的索引值也变了，导致各种的less报错

 解决：不用create-react-app 项目   脚手架来搭建项目，这里因为create不再支持搭建老版本的react

直接用packge下载对应包

  "dependencies": {

    "@testing-library/jest-dom": "^5.9.0",

    "@testing-library/react": "^11.0.0",

    "@testing-library/user-event": "^11.1.0",

    "antd": "^4.13.0",

    "babel-plugin-import": "^1.13.5",

    "customize-cra": "^1.0.0",

    "less": "^4.1.3",

    "less-loader": "5.0.0",

    "react": "^16.14.0",

    "react-app-rewired": "^2.2.1",

    "react-dom": "^16.13.1",

    "react-router": "5.2.0",

    "react-router-dom": "5.2.0",

    "react-scripts": "3.4.4"

  },

  "scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test",

    "eject": "react-scripts eject"

  },

上面是我用的版本

config-overrides.js 设置

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

module.exports = override(

  fixBabelImports("import", {

    libraryName: "antd",

    libraryDirectory: "es",

    // style: "css",

    style: true,

  }),

  addLessLoader({

    // postcssOptions 按需加载antd关键

    lessOptions: {

      javascriptEnabled: true,

      modifyVars: { "@primary-color": "#ad2102" }, //配置相关主题颜色

    },

  })

);

 搞定