详解Vue-cli webpack移动端自动化构建rem问题


Posted in Javascript onApril 07, 2018

相信很多小伙伴想着自己的移动端项目能够自动转换为rem,这才符合前端的潮流,如果用自己手写或者编辑器插件来改动十分不方便还容易出错,我在网上找了很多的方法发现以下问题:

1 照着老的视频教程去弄,发现node npm webpack px2rem的各种插件版本都不一样,根本没用

2 网上的教程缺斤少俩,不完整,搞得我整了半天搞不定,想想干脆手动vscode 的cssrem设置算了,但老子还是不服气,东拼西凑还是整出来了,最后还是研究出了以下方法希望对大家的移动端自动化构建rem有帮助

1 安装vue-cli这个就不多说了,大家都应该会

2 安装和配置px2rem-loader(这里没有用postcss试过了很多问题还是决定用这个)

第一步 :npm install px2rem-loader

第二部 : webpack.base.conf.js下添加对象,这里我用的是sass,用其他的按照下面规律改就行了,相信都看得懂

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

第三步 : webpack.dev.conf.js下的plugins添加一个东西,大家一定要注意remUnit这个属性,就是在苹果5情况下为40px,我这里定为40,也有人定为80,我这里40是为了配合hotcss使用下面我会讲到

plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后, 此配置不能直接写在自定义配置项中, 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

第四部 : 这是多人不知道的,很多人就是差这一步,utils.js下找到const cssLoader加上?importLoaders=1

const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

到这里为止安装就完成了

输入font-size:40px

输出font-size:1rem (在iphone下)

3 我们都知道设备的像素比不一样的,所以我们用hotcss来调整设备的像素比 链接

我放在了src/assets/js/里面大家可根据习惯来

引入方法,自己定义什么名字都行,这里我吧hotcss.js改为了viewport.js

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

这样就大功告成啦

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
webpack配置之后端渲染详解
Oct 26 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 #Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 #Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 #Javascript
Javascript实现运算符重载详解
Apr 07 #Javascript
Vue中使用Sortable的示例代码
Apr 07 #Javascript
JavaScript实现简单动态进度条效果
Apr 06 #Javascript
js+css实现打字效果
Jun 24 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP中一个控制字符串输出的函数
2006/10/09 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php生成图片验证码的方法
2016/04/15 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
koa源码中promise的解读
2018/11/13 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python多进程间通信代码实例
2019/09/30 Python
pandas 空数据处理方法详解
2019/11/02 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
关于圣诞节的广播稿
2014/01/26 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
综合管理员岗位职责
2015/02/11 职场文书
个人工作年终总结
2015/03/09 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
Python实现科学占卜 让视频自动打码
2022/04/09 Python