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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
浅谈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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
利用python获取Ping结果示例代码
2017/07/06 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
数学教学随笔感言
2014/02/17 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
社区清明节活动总结
2014/07/04 职场文书
人力资源职位说明书
2014/07/29 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
班主任2015新年寄语
2014/12/08 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang