详解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 相关文章推荐
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php 分页类 扩展代码
2009/06/11 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
JS编程小常识很有用
2012/11/26 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
公司聘任书模板
2014/03/29 职场文书
公证委托书格式
2014/09/13 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
小学中队委竞选稿
2015/11/20 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js