webpack配置导致px2rem强制px失效

December 24, 2019 ... ☕️ 2 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了。

#css#less