在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
 },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章