場(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è)置罢洲，可以寫(xiě)['*', '!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)換惹苗，這里也支持正則寫(xiě)法。
? ? ? 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.
