转：vw适配中使用伪类选择器遇到的问题

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

在使用vue init webpack构建的项目中，一开始我准备使用rem布局，以前使用rem布局，都采用的是AMFE团队发布的lib-flexible，但是在flexible的redeme的一开始我就读到了这么一段话，官方指引我使用vw实现适配

依据引导，我启用了postcss插件，并且学习到了vw适配，vue构建项目的根目录下的.postcssrc.js文件中的配置如下（摘自https://www.w3cplus.com/mobile/vw-layout-in-vue.html）：

module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
},
"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
},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
}

重点来了

与文章内有所不同的是

官方给出的配置项是这样的

1 "postcss-viewport-units":{}

我写的配置项是这样的

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