webpack配置导致px2rem强制px失效

2019年12月24日 • ... • ☕️ 1 min read

移动端的字体大小需要根据屏幕分辨率动态改变，所以有了rem，但是在不同大小的屏幕中html的font-size必须要进行动态变化，如果每次都手动计算会很麻烦。所以一般会使用 px2rem等插件，在webpack等配置中进行引入达到转换目的。

有时候，一些地方不希望转换，比如边框尺寸规定1px，字体大小规定了20px。

有两种写法：注释，或者大写。

.box {
  border: 1PX solid #ddd;
  font-size: 24px; /*no*/
}

但是有时候，又希望使用cssnano格式化和压缩css代码。这样，全程傻瓜式，岂不美哉。

  let config = {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        require('cssnano')(),
        require('postcss-px2rem')({
          remUnit: remUnit
        }),
      ],
    },
  };

遇到问题

less

压缩后

minify-result

？？？

原因

一番查找之后，发现是配置的原因，在webpack里，plugins的执行顺序问题。延申：Does the order of plugins matter?

按照之前的顺序，先执行cssnano，然后px2rem。

cssnano会删除注释，把大小变小写（规格化），然后输出给下个插件使用，到px2rem的时候，强制使用px的条件实际已经被移除。

解决方法

解决方法也简单，把px2rem移到cssnano上面就可以了。

  let config = {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        require('postcss-px2rem')({
          remUnit: remUnit
        }),
        require('postcss-flexbugs-fixes'),
        require('cssnano')()
      ],
    },
  };

这样一来，就可以随意写less了。