一些坑

vue Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
Migration guide for end-users:
关于脚手架生成项目,配置自适应postcss-pxtorem配置报错

首先你在.postcssrc.js文件正常配置(详细配置)

 1 module.exports = {
 2   plugins: {
 3     // 兼容浏览器，添加前缀
 4     autoprefixer: {
 5       overrideBrowserslist: [
 6         "Android 4.1",
 7         "iOS 7.1",
 8         "Chrome > 31",
 9         "ff > 31",
10         "ie >= 8",
11         "last 10 versions", // 所有主流浏览器最近10版本用
12       ],
13       grid: true,
14     },
15     "postcss-pxtorem": {
16       rootValue: 37.5, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
17       propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
18       unitPrecision: 5, //保留rem小数点多少位
19       //selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
20       replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
21       mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
22       minPixelValue: 12, //px小于12的不会被转换
23     },
24   },
25 };
26

也可以这样(简单一点)

 1 module.exports = {
 2   plugins: {
 3     'autoprefixer': {
 4       browsers: ['Android >= 4.0', 'iOS >= 8']
 5     },
 6     'postcss-pxtorem': {
 7       rootValue: 37.5,
 8       propList: ['*']
 9     }
10   }
11 }

这时候正常配置的话运行项目会出现错误

他说你的postcss识别不了 postcss-pxtorem ,所以导致这个错误,这时候你是配置不了.postcssrc.js的,只有注释配置才会正常运行,这时候你可以就你的package.json去看一下你的依赖项

这时候你会发现你的postcss-pxtorem是6.xxx的版本,因为就是他的版本过高了,所以导致这个问题的出现

你只需要把的版本降低到5.1.1就OK了：

npm i postcss-pxtorem@5.1.1

然后你重新运行就解决问题

原文链接：https://blog.csdn.net/m0_47965154/article/details/115380574