在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 相关文章推荐
JavaScript中setAttribute用法介绍
Jul 20 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
文件系统基本操作类
2006/11/23 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
JS 控制CSS样式表
2009/08/20 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
毕业生物理教师求职信
2013/10/17 职场文书
高中地理教学反思
2014/01/29 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
差生评语大全
2014/05/04 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
公司开会通知
2015/04/20 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
换届选举主持词
2015/07/03 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript