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

苏南大叔:webpack4系列教程,如何配置px2rem转换工具? - webpack-px2rem
webpack4系列教程,如何配置px2rem转换工具?(图5-1)

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

下载安装

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

npm i postcss-px2rem -D

苏南大叔:webpack4系列教程,如何配置px2rem转换工具? - postcss-px2rem-version
webpack4系列教程,如何配置px2rem转换工具?(图5-2)

配置文件

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

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的小数点后位数
    }
  }
}

苏南大叔:webpack4系列教程,如何配置px2rem转换工具? - postcss-px2rem-config
webpack4系列教程,如何配置px2rem转换工具?(图5-3)

相关参数

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

目前就这两个参数:

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

苏南大叔:webpack4系列教程,如何配置px2rem转换工具? - postcss-px2rem-result
webpack4系列教程,如何配置px2rem转换工具?(图5-4)

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

苏南大叔:webpack4系列教程,如何配置px2rem转换工具? - 1rem-100px
webpack4系列教程,如何配置px2rem转换工具?(图5-5)

相关链接

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

总结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack    postcss

本站的忠实读者小伙伴,正在阅读下面这些文章: