脚本宝典收集整理的这篇文章主要介绍了webpack手动构建vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,让自适应来的更简单点!,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
做移动端时,适配 是必须的。使用rem单位,可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。
我们在开发过程中,我们在css文件中,直接按设计稿,直接以px像素为单位,然后在真正的应用中,我们想让px自动转制为rem单位,那这个要怎么让构建工具自动转换呢?
大家想一下,我们的构建工具,其实最主要还是来自vue,vue这个文件中我们使用了vue-loader,那如果说你使用了vue-cli脚手架的话,那么你想增加这个功能,并不简单,但是我们手工打造构建工具,就不受限制,想怎么用就怎么用,按照刚才的思路,我们知道,所有的文件几乎是vue文件,所有的loader是vue-loader。
在webpack配置,我们一个文件可以使用多个loader, 我们使用vue-loader也可以用其它loader,那怎么用呢?这就要去看vue官方文档了。
这边我为大家找到这个文档
通过官方文档,我们可以了解到,要使用sass-loader,要需要在vue-loader中,增加一个options进行相应的配置就可以使用对应的loader了。
我们现在要做的是能自动将px转换成rem,所以跟这也有相似类,只要我们将转换的loader添加进行就可以了,那能将px自动转换成rem是哪个loader呢?
那我们要怎么找呢?当我们不会的时候,可以到npm.js官网,然后可以猜想一到输入px, rem,一回车就可以看到
从图中我们可以看到有个px2rem2-loader,下面还有一个px2rem,我们直接搜索px2rem
这种loader有多个,平常我们用的比较多的还是px2rem,所以这边 就介绍px2rem,其它loader可以自行研究噢!点击进去我们可以发现
里面有介绍我们怎么安装,以及怎么引入,我们可以模仿vue官网的写法
如上图,我们主要注意几点
我使用的是vue-cli+webpack,所以是通过npm来安装的
npm i lib-flexible --save
在main.js中引入lib-flexible
import 'lib-flexible/flexible'
npm install px2rem-loader
在build下的 utils.js中,找到generateLoaders 方法,在这里添加 。
安装配置结束后,重启项目 。然后再浏览器中查看。会发现自己设置的px被转为rem 了。
愿你成为终身学习者
以上是脚本宝典为你收集整理的webpack手动构建vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,让自适应来的更简单点!全部内容,希望文章能够帮你解决webpack手动构建vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,让自适应来的更简单点!所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。