webpack4系列教程，如何配置px2rem转换工具？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文测试的功能是：webpack配置实现，从px到rem的自动转换。对于移动端网页来说，最好是rem为单位的。但是对于传统pc端的网页，是没有这个要求的。而美工小姐姐给的设计图，一般都是以px为单位的。所以，对于切图仔来说，需要有个px到rem的转换。

苏南大叔在以前的文章中，说过如何使用vscode的插件，实现这个转换，详情见文末链接。在本文中，px2rem的功能是搭载在webpack里面的postcss里面使用的，是作为postcss的一个插件所使用的。本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、postcss@7.0.30、postcss-loader@3.0.0、postcss-px2rem@0.3.0。

下载安装

因为市面上有3个名称及功能都类似的px2rem，甚至其中两个连说明文档都一样。所以，苏南大叔就随便选了一个postcss-px2rem作为本文的实验对象。

• https://github.com/songsiqi/px2rem-postcss

npm i postcss-px2rem -D

配置文件

官方的使用说明中，貌似都是不符合目前这个webpack@4系列的使用规范的。所以，苏南大叔也没有深入研究官方提供的方案。
因为px2rem是作为postcss的一个插件而存在的，而postcss是作为webpack的一个loader而存在的。所以，这里涉及的两个配置文件，就只讲述postcss.config.js。而webpack.config.js中的css文件，是如何使用postcss-loader的。请参考下面的这个链接：

• https://newsn.net/say/webpack-postcss.html　　

postcss.config.js：

module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-px2rem')({
        remUnit: 50, // 50px = 1rem
        remPrecision: 2 // rem的小数点后位数
      })
    ]
  }

或者下面的这个配置：

module.exports = {
  plugins: {
    "autoprefixer",
    "postcss-px2rem": {
      remUnit: 50, // 50px = 1rem
      remPrecision: 2 // rem的小数点后位数
    }
  }
}

相关参数

这几个插件的参数都差不多，但是，默认值都不是太一致。如果您选择了其他的类似插件，本段的相关参数内容，就仅供参考。本文中选用的是postcss-px2rem，看看代码就知道：就是简单调用了px2rem。所以，下面的链接，可能有更多信息：

• https://github.com/songsiqi/px2rem

目前就这两个参数：

• remUnit: 设置以多少像素为1rem，这个值很重要哦，不能乱写。一般的设计图都是750px的，如果设置remUnit为75的话，那么750px就是10rem。如果设置为100的话，750px就是7.5rem（手工算的话，会比较容易）。这个值实际上是html根元素的style属性里面的font-size，html{font-size:100px}。大家可以按f12看看移动端的网页。
• remPrecision: rem的小数点后位数。
• 如果有的属性不想被转化的话，请写成 PX或者Px。只有小写的px会被转化。

如果在页面里面想正常使用的话，还需要一个rem.js作为配合，才能使用哦。这里仅仅是个提示，关于rem.js的事情，苏南大叔会在后续文章中讨论。至于说设置多少像素为1rem呢？其实写多少都行，只要和rem.js里面的写一致都可以。但是呢？以前，在人工计算这个值的时候，大家都喜欢设置100px为1rem。因为好计算嘛... 这个时候，在postcss-px2rem里面，remUnit也应该是这个值100。

相关链接

• https://github.com/songsiqi/px2rem
• https://github.com/songsiqi/px2rem-postcss
• https://newsn.net/say/vscode-px2rem.html
• https://newsn.net/say/webpack-start.html

在下面的这个插件里面，参数比px2rem要多一些，这里暂存一下，等以后苏南大叔再来分析下面这个插件：

• https://github.com/cuth/postcss-pxtorem

总结

px2rem插件，还是比较实用的。更多webpack相关教程，请查看：

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。