vue項目下一開始用的是lib-flexable,px2rem,可是發現引入ui框架時樣式會縮小,覺得是轉換的問題,然而px2rem沒有配置過濾。。就找到了postcss-pxtorem,在配置項下過濾了iview樣式css
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {browsers: ['defaults']},
"postcss-pxtorem": {
"rootValue": 75,
"propList": ['*', '!border*'],
// 注意:若是有使用第三方UI如VUX,則須要配置下忽略選擇器不轉換。
// 規則是class中包含的字符串,如vux中全部的class前綴都是weui-。也能夠是正則。
"selectorBlackList": ['ivu-']
}
}
}
複製代碼
結果開了火狐,樣式恢復,覺得解決了。直到有一天打開chrome模擬器,樣式居然又縮小了!!!!!!!! 花了半天時間才發現火狐模擬時dpr沒變化一直都是1,而chrome的dpr正常變化,因此縮小了。。坑。。。 後來想着乾脆把dpr固定1算了,可是一直不舒服。。。就本身改了postcss-pxtoremvue
找到node_modules/postcss-pxtorem/index.js添加node
return function (css) {
css.walkDecls(function (decl) {
if (/ivu-/g.test(decl.parent.selector)) {
if (decl.value.indexOf('px') === -1) return;
let vlist = decl.value.split(" ")
for(let j = 0; j < vlist.length; j++) {
if (vlist[j].indexOf('px') === -1) continue
let num = parseInt(vlist[j].match(/\d+px/g)[0].replace('px', '')) * 2
vlist[j] = vlist[j].replace(/\d+px/g, num.toString() + 'px')
}
let v = vlist.join(' ')
decl.value = v
}
})
###
複製代碼
/ivu-/g
匹配ui樣式前綴 * 2
是設計稿倍數 替換一下別的ui應該也行,沒測試chrome