在vue 中使用 less的教程详解


Posted in Javascript onSeptember 26, 2018

1.安装

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 class="box"> <p>header</p> </div>
</template>

<script>
export default {
 name: "headers",
 data() {
  return {};
 }
};
</script>

<style scoped lang="less">
.box {
 height: 300/50rem;
 width: 200/50rem;
 background-color: red;
 font-size: 16/50 rem;
}
</style>

效果展示:  

在vue 中使用 less的教程详解

在vue 中使用 less的教程详解  

总结

以上所述是小编给大家介绍的在vue 中使用 less的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Opacity.js
Jan 22 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
JS表的模拟方法
Feb 05 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
vue如何进行动画的封装
Sep 26 #Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 #Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 #Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 #Javascript
vue单页缓存方案分析及实现
Sep 25 #Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 #Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 #Javascript
You might like
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php实现对象克隆的方法
2015/06/20 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Python中的id()函数指的什么
2017/10/17 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
python爬虫 requests-html的使用
2020/11/30 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
工作会议欢迎词
2014/01/16 职场文书
医师定期考核实施方案
2014/05/07 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python