vue3.0使用postcss-px2rem适配移动端爬坑之路

时间:2024-03-13 16:18:06

这次使用了一下postcss-px2rem来适配移动端,爬了一些坑,记录一下

postcss-px2rem插件的转换,有利也有弊:

利:直接内部px换成为rem

弊:无法在控制台调试,并且会转换第三方的UI

这次使用了iview4.0测试了一下,最后放弃了postcss-px2rem,改用postcss-px2rem-exclude

总的使用过程就是

npm i postcss-px2rem-exclude -D

在这里,如果你已经安装了postcss-px2rem 的依赖,就必须要卸载掉,postcss-px2rem 和 postcss-px2rem-exclude 会冲突

npm uninstall postcss-px2rem

然后在项目根目录新建一个postcss.config.js的文件

vue3.0使用postcss-px2rem适配移动端爬坑之路

到这里就可以了,假如在跑项目之后,你发现还是没有动静,那么就有可能是在你的package.json文件中,有相同的配置导致冲突了

vue3.0使用postcss-px2rem适配移动端爬坑之路

需要把这一段的配置删除,使用postcss.config.js的配置

或者你也可以选择在vue.config.js中配置,那么就需要在文件夹的加上css的配置了

vue3.0使用postcss-px2rem适配移动端爬坑之路

到最后,完成如图

vue3.0使用postcss-px2rem适配移动端爬坑之路