postcss-px2rem各種版本以及配置
postcss-px2rem的作用就是將項(xiàng)目的px自動(dòng)轉(zhuǎn)成rem。關(guān)于postcss-px2rem有多種版本。昨天我們介紹過(guò)postcss-plugin-px2rem，這個(gè)插件的優(yōu)勢(shì)是其配置里有exclude選項(xiàng)，其作用就是排除那些不需要將px轉(zhuǎn)換成rem的文件。
例如，如果我們將 node_module 這個(gè)文件夾排除后，那么我們使用的前端UI框（vant, Element）的單位就不會(huì)轉(zhuǎn)換成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不做過(guò)多贅述，可以看下“在移動(dòng)端使用amfe-flexible和postcss-plugin-px2rem做適配”這篇。
postcss-pxtorem
配置可以在vue.config.js里，也可以在postcss.config.js
1. vue.config.js配置
安裝：
配置：
2. postcss.config.js配置
安裝：
配置：
注意：
如果是用vue3創(chuàng)建的vue項(xiàng)目，webpack和postcss-pxtorem的版本都不要太高，否則因版本的問(wèn)題啟動(dòng)不起來(lái)。目前我使用的版本如下：
普及一下經(jīng)常忽略的知識(shí)點(diǎn)。
查看webpack的版本命令：
如果項(xiàng)目中的webpack不是我們需要的，我們可以選卸載再安裝
全局卸載：
局部卸載：
重新安裝低版本：
postcss-px2rem
安裝：
vue.config.js配置
TIPS:
該插件不能轉(zhuǎn)換行內(nèi)樣式中的 px，例如 <div style="width: 200px;"></div>
如果某個(gè)樣式不想轉(zhuǎn)化，則可以將單位寫(xiě)成PX或者Px，則不進(jìn)行編譯。
