問題
在之前的文章【經(jīng)驗分享】使用amfe-flexible以及px2rem-loader解決VUE移動端適配中，確實可以解決vue中的css問題丑瞧，但是卻無法解決less, stylus以及css文件的問題淫半，這個時候就需要使用postcss-plugin-px2rem來解決。
如圖 assets/css/luji.scss中的60px是無法替換成rem的羞反。
解決方式
一、按照postcss-plugin-px2rem
npm install postcss-plugin-px2rem --save-dev
二毛萌、配置vue.config
module.exports = {
lintOnSave: true,
<!--新增的內(nèi)容-->
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 75, //換算基數(shù)苟弛， 默認(rèn)100 ，這樣的話把根標(biāo)簽的字體規(guī)定為1rem為50px,這樣就可以從設(shè)計稿上量出多少個px直接在代碼中寫多上px了阁将。
// unitPrecision: 5, //允許REM單位增長到的十進(jìn)制數(shù)字膏秫。
//propWhiteList: [], //默認(rèn)值是一個空數(shù)組，這意味著禁用白名單并啟用所有屬性做盅。
// propBlackList: [], //黑名單
exclude: /(node_module)/, //默認(rèn)false缤削，可以（reg）利用正則表達(dá)式排除某些文件夾的方法，例如/(node_module)\/如果想把前端UI框架內(nèi)的px也轉(zhuǎn)換成rem吹榴，請把此屬性設(shè)為默認(rèn)值
// selectorBlackList: [], //要忽略并保留為px的選擇器
// ignoreIdentifier: false, //（boolean/string）忽略單個屬性的方法亭敢，啟用ignoreidentifier后，replace將自動設(shè)置為true图筹。
// replace: true, // （布爾值）替換包含REM的規(guī)則帅刀，而不是添加回退。
mediaQuery: false, //（布爾值）允許在媒體查詢中轉(zhuǎn)換px远剩。
minPixelValue: 3 //設(shè)置要替換的最小像素值(3px會被轉(zhuǎn)rem)扣溺。 默認(rèn) 0
}),
]
}
}
}
<!--新增結(jié)束-->
}
三、package.json 中加入postcss 相關(guān)插件
{
"dependencies": { .. }
"postcss": {
"plugins": {
"autoprefixer": {},
"precss": {}
}
}
}
順利解決
