在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 相关文章推荐
深入学习jQuery Validate表单验证
Jan 18 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
js实现二级导航功能
Mar 03 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
详解php的socket通信
2015/08/11 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Python中join函数简单代码示例
2018/01/09 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
解决python 找不到module的问题
2020/02/12 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
Unix里面如何在后台运行程序
2016/10/14 面试题
文员个人求职自荐信
2013/09/21 职场文书
三年级音乐教学反思
2014/01/28 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
初中作文评语集锦
2014/12/25 职场文书
财务部岗位职责范本
2015/04/14 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
深入详解JS函数的柯里化
2021/06/09 Javascript
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
java实现对Hadoop的操作
2021/07/01 Java/Android