代码分析vue中如何配置less


Posted in Javascript onSeptember 28, 2018

安装

npm install --save-dev less less-loader
npm install --save-dev style-loader css-loader

先在index.html页面head标签内插入这段代码

<script>
 (function (doc, win) {
  var docEl = doc.documentElement,
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  recalc = function () {
   var clientWidth = docEl.clientWidth;
   if (!clientWidth) return;
   if (clientWidth >= 640) {
   docEl.style.fontSize = '100px';
   } else {
   docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
   }
  };
 
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
 })(document, window);
 </script>

在添加 build/webpack.base.conf.js 里面的

module.exports 里的 module 里添加下面这段配置

{
  test: /\.less$/,
  use: [
   "style-loader",
   "css-loader",
   "less-loader"
  ]
  }

组建 headers

<template>
 <div> <p>header</p> </div>
</template>
 
<script>
export default {
 name: "headers",
 data() {
 return {};
 }
};
</script>
 
<style scoped>
.box {
 height: 300/50rem;
 width: 200/50rem;
 background-color: red;
 font-size: 16/50 rem;
}
</style>

效果展示:

代码分析vue中如何配置less

Javascript 相关文章推荐
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
Angular CLI 安装和使用教程
Sep 13 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
使用JavaScript破解web
Sep 28 #Javascript
详解node字体压缩插件font-spider的用法
Sep 28 #Javascript
JS canvas绘制五子棋的棋盘
May 28 #Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 #Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 #Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 #Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 #Javascript
You might like
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
js实现小星星游戏
2020/03/23 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
python制作一个桌面便签软件
2015/08/09 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
使用pandas读取文件的实现
2019/07/31 Python
wxPython实现整点报时
2019/11/18 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
通信专业个人自我鉴定
2013/10/21 职场文书
省文明单位申报材料
2014/05/08 职场文书
企业读书活动总结
2014/06/30 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
求职推荐信范文
2015/03/27 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
Python函数中apply、map、applymap的区别
2021/11/27 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL