标签:regexp move create conf value com erro 增加 view
一般第三方ui框架用的都是不同的适配方式,如果我们使用了vw适配,那么在使用mint-ui框架时,就会发现px单位会被转换成vw,从而导致样式变小的问题,如图
网上看到了很多种解决方案,这里推荐第四种
1、重写第三方组件ui样式大小
2、在postcss.config.js中的selectorBlackList选项中增加不需要vw转换的类名
selectorBlackList: [‘.ignore‘, ‘.hairlines‘], // (Array) The selectors to ignore and leave as px.
3、使用rem适配方案,将原本750的宽度设置为一半,配置成37.5
https://www.jianshu.com/p/8f9aab666c4a
4、添加exclude选项,将node_modules目录排除掉,即不会受影响
在node_mudule中找到postcss-px-to-viewport,修改index.js新增对exclude选项的处理
module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
var opts = objectAssign({}, defaults, options);
var pxReplace = createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, opts.viewportUnit);
return function (css) {
css.walkDecls(function (decl, i) {
if (options.exclude) { // 添加对exclude选项的处理
if (Object.prototype.toString.call(options.exclude) !== '[object RegExp]') {
throw new Error('options.exclude should be RegExp!')
}
if (decl.source.input.file.match(options.exclude) !== null) return;
}
// This should be the fastest test and will remove most declarations
if (decl.value.indexOf('px') === -1) return;
if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;
decl.value = decl.value.replace(pxRegex, pxReplace);
});
if (opts.mediaQuery) {
css.walkAtRules('media', function (rule) {
if (rule.params.indexOf('px') === -1) return;
rule.params = rule.params.replace(pxRegex, pxReplace);
});
}
};
});
然后在.postcssrc.js添加postcss-px-to-viewport的exclude选项
"postcss-px-to-viewport": {
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'vw',
selectorBlackList: ['.ignore', '.hairlines'],
minPixelValue: 1,
mediaQuery: false,
exclude: /(\/|\\)(node_modules)(\/|\\)/
},
这里需要注意了,在没有修改postcss-px-to-viewport的index.js文件,直接在.postcssrc.js中添加了以下代码也成功了
exclude: /(\/|\\)(node_modules)(\/|\\)/
然后我去node_mudele下找到postcss-px-to-viewport的index.js打开发现了如下代码,看来是postcss-px-to-viewpor这个插件增加了对这个问题的处理, 我使用的版本是"postcss-px-to-viewport": "^1.1.0",
if (opts.exclude && file) {
if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') {
if (isExclude(opts.exclude, file)) return;
} else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') {
for (let i = 0; i < opts.exclude.length; i++) {
if (isExclude(opts.exclude[i], file)) return;
}
} else {
throw new Error('options.exclude should be RegExp or Array.');
}
}
vue项目中使用了vw适配方案,引入第三方ui框架mint-ui时,适配问题解决
标签:regexp move create conf value com erro 增加 view
原文地址:https://www.cnblogs.com/fozero/p/10799986.html