代码分析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 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Numpy的简单用法小结
2019/08/28 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
校庆接待方案
2014/03/18 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
员工保密承诺书
2014/05/28 职场文书
2014年财务科工作总结
2014/11/11 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
初中团委工作总结
2015/08/13 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
python游戏开发Pygame框架
2022/04/22 Python