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 Ajax 乱码问题解决方案
Apr 15 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
原生js实现自定义消息提示框
Nov 19 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
php 调用远程url的六种方法小结
2009/11/02 PHP
Symfony核心类概述
2016/03/17 PHP
Javascript小技巧之生成html元素
2014/05/15 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
简单说下OSPF的操作过程
2014/08/13 面试题
易程科技软件测试笔试
2013/03/24 面试题
总监职责范文
2013/11/09 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
三严三实对照检查材料
2014/09/22 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
养成教育主题班会
2015/08/13 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript