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 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
angularJS开发注意事项
May 26 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
php中的登陆login
2007/01/18 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
JS变量及其作用域
2017/03/29 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python中itertools模块用法详解
2014/09/25 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python如何删除文件、目录
2020/06/23 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
女大学生毕业找工作的自我评价
2013/10/03 职场文书
小学生家长评语大全
2014/02/10 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL