在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 参数中的数组展开 [译]
Sep 21 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
详解Vite的新体验
Feb 22 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文件夹与文件目录操作函数介绍
2013/09/09 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
JS实现多选框的操作
2020/06/24 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python解释执行原理分析
2014/08/22 Python
Python的randrange()方法使用教程
2015/05/15 Python
python冒泡排序简单实现方法
2015/07/09 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
Nike香港官网:Nike HK
2019/03/23 全球购物
收银员的岗位职责范本
2014/02/04 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
《大海那边》教学反思
2014/04/09 职场文书
经管应届生求职信范文
2014/05/18 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫