./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" }, //配置相关主题颜色
},
})
);
搞定