vue中使用 px2rem 同时引入第三方库的时候 第三方库的ui 样式也变成rem 导致错乱 请问如何解决?
引入exclude 之后报错,现在困在这里了。
vue中使用 px2rem 同时引入第三方库的时候 第三方库的ui 样式也变成rem 导致错乱 请问如何解决?
引入exclude 之后报错,现在困在这里了。
这个网上有很多可行的方法,我用的是比较常见的手动设置meta标签,之前有用一个postcss-px2rem-exclude的npm库来替换postcss-px2rem实现不修改node_modules目录下的单位来实现适配。
'use strict';
var postcss = require('postcss');
var objectAssign = require('object-assign');
var pxRegex = require('./lib/pixel-unit-regex');
var filterPropList = require('./lib/filter-prop-list');
var defaults = {
rootValue: 16,
unitPrecision: 5,
selectorBlackList: [],
propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
replace: true,
mediaQuery: false,
minPixelValue: 0
};
var legacyOptions = {
'root_value': 'rootValue',
'unit_precision': 'unitPrecision',
'selector_black_list': 'selectorBlackList',
'prop_white_list': 'propList',
'media_query': 'mediaQuery',
'propWhiteList': 'propList'
};
module.exports = postcss.plugin('postcss-pxtorem', function (options) {
convertLegacyOptions(options);
var opts = objectAssign({}, defaults, options);
var pxReplace = createPxReplace(opts.rootValue, opts.unitPrecision, opts.minPixelValue);
var satisfyPropList = createPropListMatcher(opts.propList);
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
}
})
css.walkDecls(function (decl, i) {
// This should be the fastest test and will remove most declarations
if (decl.value.indexOf('px') === -1) return;
if (!satisfyPropList(decl.prop)) return;
if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;
var value = decl.value.replace(pxRegex, pxReplace);
// if rem unit already exists, do not add or replace
if (declarationExists(decl.parent, decl.prop, value)) return;
if (opts.replace) {
decl.value = value;
} else {
decl.parent.insertAfter(i, decl.clone({ value: value }));
}
});
if (opts.mediaQuery) {
css.walkAtRules('media', function (rule) {
if (rule.params.indexOf('px') === -1) return;
rule.params = rule.params.replace(pxRegex, pxReplace);
});
}
};
});
function convertLegacyOptions(options) {
if (typeof options !== 'object') return;
if (
(
(typeof options['prop_white_list'] !== 'undefined' && options['prop_white_list'].length === 0) ||
(typeof options.propWhiteList !== 'undefined' && options.propWhiteList.length === 0)
) &&
typeof options.propList === 'undefined'
) {
options.propList = ['*'];
delete options['prop_white_list'];
delete options.propWhiteList;
}
Object.keys(legacyOptions).forEach(function (key) {
if (options.hasOwnProperty(key)) {
options[legacyOptions[key]] = options[key];
delete options[key];
}
});
}
function createPxReplace (rootValue, unitPrecision, minPixelValue) {
return function (m, $1) {
if (!$1) return m;
var pixels = parseFloat($1);
if (pixels < minPixelValue) return m;
var fixedVal = toFixed((pixels / rootValue), unitPrecision);
return (fixedVal === 0) ? '0' : fixedVal + 'rem';
};
}
function toFixed(number, precision) {
var multiplier = Math.pow(10, precision + 1),
wholeNumber = Math.floor(number * multiplier);
return Math.round(wholeNumber / 10) * 10 / multiplier;
}
function declarationExists(decls, prop, value) {
return decls.some(function (decl) {
return (decl.prop === prop && decl.value === value);
});
}
function blacklistedSelector(blacklist, selector) {
if (typeof selector !== 'string') return;
return blacklist.some(function (regex) {
if (typeof regex === 'string') return selector.indexOf(regex) !== -1;
return selector.match(regex);
});
}
function createPropListMatcher(propList) {
var hasWild = propList.indexOf('*') > -1;
var matchAll = (hasWild && propList.length === 1);
var lists = {
exact: filterPropList.exact(propList),
contain: filterPropList.contain(propList),
startWith: filterPropList.startWith(propList),
endWith: filterPropList.endWith(propList),
notExact: filterPropList.notExact(propList),
notContain: filterPropList.notContain(propList),
notStartWith: filterPropList.notStartWith(propList),
notEndWith: filterPropList.notEndWith(propList)
};
return function (prop) {
if (matchAll) return true;
return (
(
hasWild ||
lists.exact.indexOf(prop) > -1 ||
lists.contain.some(function (m) {
return prop.indexOf(m) > -1;
}) ||
lists.startWith.some(function (m) {
return prop.indexOf(m) === 0;
}) ||
lists.endWith.some(function (m) {
return prop.indexOf(m) === prop.length - m.length;
})
) &&
!(
lists.notExact.indexOf(prop) > -1 ||
lists.notContain.some(function (m) {
return prop.indexOf(m) > -1;
}) ||
lists.notStartWith.some(function (m) {
return prop.indexOf(m) === 0;
}) ||
lists.notEndWith.some(function (m) {
return prop.indexOf(m) === prop.length - m.length;
})
)
);
};
}
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 替换设计稿的倍数
然后再postcss-pxtorem 的配置 .postcss.js
// https://github.com/michael-ciniawsky/postcss-load-config
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-']
}
}
}
因为ui框架一般都是在dpr=1下,然后把第三方样式过滤不转换rem
13 回答13k 阅读
7 回答2.2k 阅读
3 回答1.3k 阅读✓ 已解决
6 回答1.3k 阅读✓ 已解决
2 回答1.4k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决
6 回答1.1k 阅读
flexable.js 和 安装第三方ui库 以及px2rem 第三方冲突,引起第三方库无法使用的问题
然后直接再css 文件里面写设计图上的px单位 ,会自动转换成rem,同步出现的问题,是ui库上的css 文件也被转换成rem ,导致样式变乱
这时我们使用的flexible引入时 data-dpr不是一个写死了的,是一个动态的;就导致这个问题
解决办法
"px-to-rem.px-per-rem": 0.5, // 第一步 主要是让1rem 等于0.5px
全选你要改的代码 option+Z 快捷键。(windows我不知道)你会发现所有的px变rem
"px-to-rem.px-per-rem": 1, //第二步
然后在全选你要改的代码 option+Z 快捷键。你会发现所有的rem变px 这个px的值比是原来的2倍