postcss-px2rem各种版本以及配置

postcss-px2rem的作用就是将项目的px自动转成rem。关于postcss-px2rem有多种版本。昨天我们介绍过postcss-plugin-px2rem，这个插件的优势是其配置里有exclude选项，其作用就是排除那些不需要将px转换成rem的文件。

例如，如果我们将 node_module 这个文件夹排除后，那么我们使用的前端UI框（vant, Element）的单位就不会转换成rem。

除了postcss-plugin-px2rem，还有postcss-pxtorem， postcss-px2rem两种插件。

官方文档：

postcss-plugin-px2rem官方文档：
https://www.npmjs.com/package/postcss-plugin-px2rem

postcss-pxtorem官方文档：
https://www.npmjs.com/package/postcss-pxtorem

postcss-px2rem官方文档：
https://www.npmjs.com/package/postcss-px2rem

postcss-loader官方文档：
https://webpack.docschina.org/loaders/postcss-loader/

postcss-plugin-px2rem不做过多赘述，可以看下“在移动端使用amfe-flexible和postcss-plugin-px2rem做适配”这篇。

• postcss-pxtorem

配置可以在vue.config.js里，也可以在postcss.config.js

1. vue.config.js配置

安装：

配置：

2. postcss.config.js配置

安装：

配置：

注意：

如果是用vue3创建的vue项目，webpack和postcss-pxtorem的版本都不要太高，否则因版本的问题启动不起来。目前我使用的版本如下：

普及一下经常忽略的知识点。

查看webpack的版本命令：

如果项目中的webpack不是我们需要的，我们可以选卸载再安装

全局卸载：

局部卸载：

重新安装低版本：

• postcss-px2rem

安装：

vue.config.js配置

TIPS:

1. 该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>

2. 如果某个样式不想转化，则可以将单位写成PX或者Px，则不进行编译。