Проект vue начал использовать lib-flexable, px2rem, но обнаружил, что стиль будет уменьшен, когда будет введен ui framework, думая, что это проблема преобразования, но px2rem не настроен с фильтрацией. . Я нашел postcss-pxtorem и отфильтровал стиль iview под элементом конфигурации
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-']
}
}
}
В итоге файрфокс открыл, и стиль восстановил, думая решил. Пока однажды, когда я не открыл симулятор хрома, стиль снова не уменьшился! ! ! ! ! ! ! ! Потребовалось полдня, чтобы обнаружить, что dpr не менялся во время симуляции Firefox и всегда был равен 1, в то время как dpr хрома менялся нормально, поэтому он уменьшался. . яма. . . Позже я думал просто установить dpr на 1, но это было неудобно. . . Я сам изменил postcss-pxtorem
метод
Найдите node_modules/postcss-pxtorem/index.js и добавьте
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соответствие префиксу стиля пользовательского интерфейса* 2Это кратно черновому дизайну. Можно было бы заменить другой пользовательский интерфейс, но это не тестировалось.