config-overrides.js
const {
override,
addLessLoader,
addWebpackAlias,
} = require('customize-cra')
const path = require("path")
module.exports = override(
addLessLoader({
lessOptions: {
javascriptEnabled: true,
relativeUrls: false,
modifyVars: {
'@primary-color': '#A80000'
},
cssModules: {
localIdentName: "[path][name]__[local]--[hash:base64:5]",
}
}
}),
addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
'@u': path.resolve(__dirname, 'src/utils'),
'@p': path.resolve(__dirname, 'src/pages'),
})
)
package.json
{
"name": "my-app-ts",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.1",
"@types/node": "^16.11.31",
"@types/react": "^18.0.8",
"@types/react-dom": "^18.0.0",
"antd": "^4.20.1",
"postcss": "^8.1.14",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"typescript": "^4.6.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "cross-env REACT_APP_TYPE=0 react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-plugin-import": "^1.13.5",
"cross-env": "^7.0.3",
"customize-cra": "^1.0.0",
"eslint-plugin-prettier": "^4.0.0",
"http-proxy-middleware": "^2.0.6",
"less": "4.1.2",
"less-loader": "5.0.0",
"postcss-loader": "^4.0.3",
"postcss-preset-env": "^5.3.0",
"postcss-pxtorem": "^6.0.0",
"react-app-rewired": "^2.2.1"
}
}
解决了,不过使用的是其他方案,问题应该是在于create-react-app版本问题,升级版本,使用了ant提供的craco方案支持less