代码分析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代码
Sep 27 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
php中的ini配置原理详解
2014/10/14 PHP
php上传文件常见问题总结
2015/02/03 PHP
javascript操作css属性
2013/12/30 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
js实现继承的5种方式
2015/12/01 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python框架django项目部署相关知识详解
2019/11/04 Python
Python模块常用四种安装方式
2020/10/20 Python
匡威德国官网:Converse德国
2019/01/26 全球购物
抄作业检讨书
2014/02/17 职场文书
小学生环保倡议书
2014/05/15 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
放飞理想演讲稿
2014/09/09 职场文书
防灾减灾标语
2014/10/07 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
培训师岗位职责
2015/02/14 职场文书
领导干部学习心得体会
2016/01/23 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python