如标题所示bug如何解决呢？ 搜到这个文章的朋友肯定确切的想cv修复webpack的这个报错。那咱们先来个前置，要不然你代码贴错了怎么办。
先贴下package.json的文件
{
"name": "tobacco-business-analysis",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^2.2.7",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.105",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"antd-mobile": "^5.37.1",
"echarts": "^5.5.1",
"echarts-gl": "^2.0.9",
"history": "^5.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-redux": "^9.1.2",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "PORT=2048 react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-scripts test",
"eject": "react-scripts 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-proposal-private-property-in-object": "^7.21.11",
"@types/customize-cra": "^1.0.8",
"@types/postcss-pxtorem": "^6.0.3",
"babel-plugin-import": "^1.13.8",
"compression-webpack-plugin": "^11.1.0",
"customize-cra": "^1.0.0",
"eslint-config-prettier": "^9.1.0",
"less": "^4.2.0",
"less-loader": "^12.2.0",
"lib-flexible": "^0.3.2",
"postcss-loader": "^8.1.1",
"postcss-pxtorem": "^6.1.0",
"react-app-rewired": "^2.2.1",
"react-router-dom": "^6.26.1"
}
}
这里注意，我使用的是postcss-loader@^8.1.1来配置pxtorem请查看你本地的版本是多少。
出现标题的错误的原因是因为postcss-loaderde的版本过高，它的配置想有做了更改。当然log也说明的很明显。
我因为是新建的项目，使用的是react-app-rewired来配置webpack配置。如果你直接执行的npm run reject来暴露cra的配置文件。那么你需要自己去配置文件中找到相关postcss-loader的配置来。具体在根目录的config文件夹。这里不做展开。
言归正传。如果你情况跟我一样。那么你需要搭配customize-cra的第三方库来修改默认postcss-loader的配置。
一般你会遇到这个报错，是因为你需要安装需要postcss-loader处理的第三方库。比如我是因为安装pxtorem的库。因为是移动端项目，为了设备之间切换能够看起来像素变化更加丝滑。需要将px转换为rem。如下就是解决方案。
adjustStyleLoaders(({ use }) => {
use.forEach(loader => {
if (loader.loader && loader.loader.includes('postcss-loader')) {
loader.options = {
postcssOptions: {
plugins: [
postcssPxToRem({
rootValue: 37.5, // 根据设计稿的宽度设置 (375px 宽度的设计稿可以设置为 37.5)
propList: ['*'], // 转换所有 CSS 属性
selectorBlackList: [], // 排除不需要转换的选择器
replace: true,
mediaQuery: false,
minPixelValue: 0,
exclude: /node_modules/
})
]
}
};
}
});
})
这里注意的是，因为postcss-loader的option有做了更改。所以才会报错。
修改之后。需要执行如下命令来解决缓存问题。
rm -rf node_modules
npm cache clean --force
npm install
