pxTorem和autoprefixer同时使用

日常小bug集合
BUG

问题描述： 插件pxTorem和autoprefixer同时使用的情况下，如果在vue.config.js中不配置autoprefixer，autoprefixer会失效

bug出现背景

在某个H5的首页，尝试实现如下动画

1
2
3
4
<div class="theme abs">
  <img src="../assets/imgs/theme.png" alt="" />
  <div class="light abs"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.theme {
  width: 527px;
  height: 374px;
  top: 245 / 1206 * 100%;
  left: 50%;
  margin-left: -375px + 110px;
  filter: drop-shadow(5px 5px 6px rgba(0, 0, 0, 0.3));
  overflow: hidden;
  opacity: 0;
  img {
    width: 100%;
    height: 100%;
  }
  .light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mask: url("../assets/imgs/theme.png");
    mask-size: 100%;
    &:before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      left: -100%;
      top: 0;
      background: rgb(255, 255, 255);
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 25%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 1) 75%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  }
}
&.ready {
  .light:before {
    animation: LightMove 1s 1.1s ease-in-out forwards;
  }
}
@keyframes LightMove {
  from {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(200%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

动画的确是生效了，但是发现动画有点诡异，和想象中的效果不太一样（只看见一团诡异的白色飘来飘去），然后开始查看DOM元素，但是从调试器看没啥毛病，但是不死心，之前写这动画还是效果很出色的

然后打开了之前的项目对比代码，代码没区别，打开之前的链接，果然，-webkit-mask-size,-webkit-mask,这两个css属性在本次的代码里没有浏览器前缀

发现问题

pxTorem和autoprefixer同时使用时，autoprefixer失效了

解决方式

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            rootValue: 46.875, // 换算的基数
            // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
            //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
            // selectorBlackList: ['weui', 'mu'],
            propList: ["*"],
            exclude: /node_modules/i
          }),
          require("autoprefixer")({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
              //'last 2 versions', // 所有主流浏览器最近2个版本
            ],
            grid: true
          })
        ]
      }
    }
  },
};

结论

插件pxTorem和autoprefixer同时使用的情况下，autoprefixer会失效,需要在vue.config.js中重新配置才能生效