在Vue项目中使用vw实现移动端适配 遇到mint-ui冲突的问题。

首先感谢“大漠”这样的大牛在前端届无私共享,让我学到了很多知识。

不说多了,上问题。
首先,我用了“大漠”的在Vue项目中使用vw实现移动端适配 方案。
https://www.w3cplus.com/mobile/vw-layout-in-vue.html

然后整合Mint-UI报错了,问题好像是content已经存在,请放弃覆盖它,后来发现是适配方案中的插件postcss-viewport-units 会自动为每个元素添加content,这样子,同时,Mint-UI的某个控件也需要重写。
就导致了冲突。

还好,有人遇到这种问题并给出了答案,在这里十分感谢:

原文地址: https://blog.csdn.net/perryliu6/article/details/80965734

答主的意思是,在这个插件的GitHub上发现一个可以忽略某些添加content的方法。
然后在插件给的例子中找到了方法。

这里写图片描述

test中给的方案:

配置一个过滤规则函数是不是就可以回避这个问题了 但是这个函数怎么写?
在源码的test文件夹下

这里写图片描述

写上去后发现成功规避掉了::after,那::before呢?

答主给了解决方案:
vue构建项目的根目录下的.postcssrc.js文件中的配置

 "postcss-viewport-units": {
   filterRule: rule => rule.selector.indexOf('::after') === -1
     && rule.selector.indexOf('::before') === -1
     && rule.selector.indexOf(':after') === -1
     && rule.selector.indexOf(':before') === -1
 },

猜你喜欢

转载自blog.csdn.net/Pengxiaozhen1111/article/details/81772325