出现VW自适应方案报错already has a ‘content‘ property, give up to overwrite it的原因及解决办法

背景及原因

在使用vw自适应解决方案的时候，当引入第三方UI组件库或者使用伪类选择器出现了already has a ‘content’ property, give up to overwrite it的报错。

这是因为postcss-viewport-units插件会自动给html元素添加content属性，由此就造成了伪类选择器的冲突。

解决办法

那么如何解决这样的报错呢？

postcss-viewport-units插件文档其实已经给出了解决办法，配置一个过滤规则函数即可解决问题

首先我们需要安装最新的postcss-viewport-units （很多情况下配置过滤规则函数也解决不了问题就是因为postcss-viewport-units版本太低的原因导致）

npm i postcss-viewport-units@0.1.6 -S

其次.postcssrc.js文件配置postcss-viewport-units插件

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

重新启动项目，不再抛出类似错误。

文章参考

https://blog.csdn.net/perryliu6/article/details/80965734

https://zhuanlan.zhihu.com/p/164422789