在不对项目进行大改的情况下解决mpvue默认的px转rpx的问题

写在前面

最近在公司接手了一个开发了一半的mpvue项目，在写边框样式的时候，照常给了粗细为1px。但是，当给UI小姐姐看效果的时候，她立马就跟我说，你这个肯定不止1px。

我当下就不认可了，我这个写死了1px的，怎么可能不是呢？于是打开开发工具调试给她看，结果，哦豁，还真不是1px，是2rpx。

这就奇怪了，我明明写死的1px，怎么调试的时候会变成2rpx呢？

于是我推测，mpvue默认有一个px转rpx的方法。

全局搜索之后，果然找到了它。

路径：“/build/util.js”：

就是这个px2rpxLoader，把我在样式里写的所有px都转为了rpx。

可能有人问了，转为rpx有什么问题吗？

这是因为rpx可以根据屏幕宽度进行自适应。如果是我们开发者主动写rpx，那是为了适配；如果是我们想定死一个宽度，不让他根据屏幕尺寸去自适应，那这个时候就要写死成px了。可是如果mpvue会自动将px转为rpx的话，就没办法实现我们想要的效果了，就像上文那样，明明想要在无论什么屏幕尺寸下，边框宽度都为1px，但实际上被转为2rpx之后，它在不同的屏幕尺寸下的实际宽度就不再是1px了。（要我说啊，UI小姐姐眼睛真是尖，我盯着看了半天也没发现它和正常的1px的边框有啥区别，人家一眼就看出来了。。）

因此这是不可以的。那么既然问题产生了，我们要怎么解决它呢？

解决

首先想到的肯定是修改这个配置，或者索性不用它就好了。但是这个做法对于一个新项目来说没有任何问题，而对于一个开发了一半的项目，特别是前一个开发者还不是你自己的项目来说，这个做法问题就很大了，因为你不知道前一个人在写样式的时候有没有专门利用这一点去写样式，贸然去掉会产生一些未知的样式bug。而如果对整个项目进行全局改动则又费时又费力，非常不可取。

因此，这里采用新建一个全局css文件来对这些需要定死为px的样式进行单独处理。

因为是全局css文件，我推荐和app.json放在同一层，这样目录结构层次上来说更合理，然后我们给它命名（我这里就是下图中的“main.scss”文件）。

有的小伙伴可能又有疑问了，全局样式写在App.vue里面不好吗，为什么要新建一个scss文件？

这正是因为那个默认方法会把所有vue文件里的样式进行修改，但其他格式的话不会，所以我们新建一个scss文件来避开它。

那么这样避开之后，再使用px就不会被自动转成rpx了。

那这个文件要怎么引入我们的vue文件里呢？也很简单，只要在需要用到的vue页面文件里，使用：

<style lang='scss'>
	@import "../main.scss";
</style>

就可以了。import后面引号里的内容是你自己的“main.scss”这个文件相对于当前文件的路径。

小结

如果你愿意每个页面建自己的scss文件，而不是像我这样建一个全局的也完全没有任何问题，总之核心思路就是新建一个scss文件来写样式，而不是把样式写在vue文件里，这样就可以有效避开mpvue自带的px转rpx方法了。