vue2中使用less简易教程


Posted in Javascript onMarch 27, 2018

首先,说明一点,如果是使用npm init webpack 项目名 的方式创建的项目,无需手动配置webpack

所以再vue中使用less就非常简单了,只需要安装less, less-loader就行了

步骤

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev

如果安装成功那么就可以再vue组件中使用less了

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

补充:

vue中 如何使用less

http://element.eleme.io/     //

elementUI是基于vue2

vue中使用less

首先vue开发环境已经安装成功

当所有东西都 准备好之后 :

第一步:

安装less依赖,npm install less less-loader --save

第二步:

修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

现在基本上已经安装完成了,然后在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域 有效)

(或者
@import './index.less'; //引入全局less文件
)。
(
html中直接引入:
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)
Javascript 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
浅谈Vue内置component组件的应用场景
Mar 27 #Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 #Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 #Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 #Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 #Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 #Javascript
Angular中使用better-scroll插件的方法
Mar 27 #Javascript
You might like
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python实现抢购IPhone手机
2018/02/07 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python GUI编程完整示例
2019/04/04 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
python爬取音频下载的示例代码
2020/10/19 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
自考自我鉴定范文
2013/10/30 职场文书
初一英语教学反思
2014/01/11 职场文书
培训协议书范本
2014/04/22 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
幼师辞职信范文
2015/02/27 职场文书
2015年药店工作总结
2015/04/20 职场文书
学习心得体会
2019/06/20 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书