場(chǎng)景:vue搭建移動(dòng)端頁(yè)面，main.js引入全局css報(bào)錯(cuò)。
原因：用了postcss-px2rem與postcss-px2rem-exclude導(dǎo)致的問(wèn)題，
解決方案：卸載后postcss-px2rem， 安裝使用postcss-pxtorem。在postcss.config.js設(shè)置如下代碼，可以自行更改設(shè)置，解決問(wèn)題。
安裝amfe-flexible和postcss-pxtorem
npm install postcss-pxtorem -S
npm install amfe-flexible -S
postcss-pxtorem將px轉(zhuǎn)為rem；
amfe-flexible可進(jìn)行屏幕自適應(yīng)；
配置及使用
1、在main.js中引入amfe-flexible
import? "amfe-flexible";
2、根目錄下添加postcss.config.js
module.exports = () => ({
? plugins: [
? // autoprefixer 自動(dòng)補(bǔ)齊 CSS3 前綴，適配不同瀏覽器
? ? require('autoprefixer')({
? ? ? overrideBrowserslist: [
? ? ? ? "last 10 versions", // 所有主流瀏覽器最近10版本用
? ? ? ],
? ? }),
? ? require('postcss-pxtorem')({
? ? ? rootValue: 192.0, //設(shè)計(jì)稿元素尺寸/10，這里設(shè)計(jì)稿寬度為1920
? ? ? propList: ["*"], //是一個(gè)存儲(chǔ)哪些將被轉(zhuǎn)換的屬性列表，這里設(shè)置為['*']全部，假設(shè)需要僅對(duì)邊框進(jìn)行設(shè)置，可以寫['*', '!border*']
? ? ? unitPrecision: 3, //保留rem小數(shù)點(diǎn)多少位
? ? ? selectorBlackList: ['el-input', 'el-step', 'no-'],//則是一個(gè)對(duì)css選擇器進(jìn)行過(guò)濾的數(shù)組，比如你設(shè)置為['el-']，那所有el-類名里面有關(guān)px的樣式將不被轉(zhuǎn)換，這里也支持正則寫法。
? ? ? replace: true,
? ? ? mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效
? ? ? // minPixelValue: 3, //px小于3的不會(huì)被轉(zhuǎn)換
? ? })
? ]
});
配置完成之后，重啟即可
可能遇到問(wèn)題
運(yùn)行報(bào)錯(cuò)如下
Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
