vue2中使用less简易教程

首先，说明一点，如果是使用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>
)

您可能感兴趣的文章:

  • Vue项目中引入外部文件的方法（css、js、less）
  • vuejs如何配置less
  • VueJS如何引入css或者less文件的一些坑
赞 (0)

相关推荐

  • Vue项目中引入外部文件的方法（css、js、less）

    Vue项目中引入外部文件的方法（css、js、less）

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • VueJS如何引入css或者less文件的一些坑

    VueJS如何引入css或者less文件的一些坑

    我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在"main.js"里使用AMD的方式引入,即 require('./assets/css/main.less'); 这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析 这时,我们要填写上依赖, require('!style!css!less!./assets/css/main.less'); 在很多以前的博客里都

  • vuejs如何配置less

    vuejs如何配置less

    本次我们来聊聊,vuejs里如何使用less.都是根据自己的开发经验来写,不对的地方请各位拍砖. 在webstorm上配置Less 首先,全局安装less npm install less -g 然后,在webstorm上配置less插件,"File" --> "settings"-->"Tools" 在"file Watchers" -->"+"-->"Less"

  • vue2中使用less简易教程

    首先,说明一点,如果是使用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> .hell

  • vue2中less的安装以及使用教程

    目录 1.安装 1.1 在vue cli2 使用vue init webpack xxx 创建的项目 1.2 在vue cli3中(vue create xxx) 2.使用 2.1定义变量 2.2 在属性中使用变量 2.3混合(Mixin) 总结 1.安装 1.1 在vue cli2 使用vue init webpack xxx 创建的项目 webpack安装要考虑less-loader的兼容问题, npm install less-loader@7.0.0 如果7.0.0不行,就一步一步下探,

  • Mysql 5.7.20压缩版下载和安装简易教程

    一.下载地址: http://dev.mysql.com/downloads/mysql/ http://www.jb51.net/softs/451120.html 1.进入官网下载,显示的应该是最新版本,选择第二个(mysql5.7.20-winx64.zip) 2.下载完成后,直接解压到自定义目录,解压目录就是安装目录 二.配置环境变量 1.新增环境变量,例: 变量名:MYSQL_HOME 变量值:D:\mysql\mysql5.7.20-winx64 2.修改环境变量PATH 在PATH

  • Java反射简易教程

    关于Java反射,我们需要弄懂以下几个问题: 反射是什么?反射有什么用?怎么用反射? 下面我们来一一进行讲解: 一.反射是什么? Reflection的意思是"反射.映象.倒影",用在Java身上指的是我们可以于运行时加载.探知.使用编译期间完全未知的classes.换句话说,Java程序可以加载一个运行时才得知名称的class,获悉其完整构造(但不包括methods定义),并生成其对象实体.或对其fields设值.或唤起其methods. Java反射机制是在运行状态中,对于任意一个

  • Linux调试工具GDB使用简易教程

    本文所述主要是Linux调试工具GDB的使用教程,具体如下. 声明:本博客内容是由本人经过实验楼教程整理得来. GDB的相关概念 GDB, 是 The GNU Project Debugger 的缩写, 是 Linux 下功能全面的调试工具.GDB 支持断点.单步执行.打印变量.观察变量.查看寄存器.查看堆栈等调试手段.在 Linux 环境软件开发中,GDB 是主要的调试工具,用来调试 C 和 C++ 程序. GDB的相关操作 下面给出一个具有buging.c的程序: [yqtao@localh

  • Python Matplotlib简易教程(小白教程)

    简单演示 import matplotlib.pyplot as plt import numpy as np # 从[-1,1]中等距去50个数作为x的取值 x = np.linspace(-1, 1, 50) print(x) y = 2*x + 1 # 第一个是横坐标的值,第二个是纵坐标的值 plt.plot(x, y) # 必要方法,用于将设置好的figure对象显示出来 plt.show() import matplotlib.pyplot as plt import numpy as

  • Ubuntu20.04防火墙设置简易教程(小白)

    前言   在现在这个网络越发便捷的社会,各种网络勒索病毒层出不穷,即使是Google浏览器也是在不断的更新版本修复漏洞.很多人认为只有Windows系统才容易中病毒,若使用Linux系统就不容易中病毒,经常让自己的电脑裸奔运行,既不装杀毒软件,也不开启防火墙.其实Linux下也是存在中病毒的可能的,只是那些病毒几乎是无法像在Windows系统下一样自动运行的,Linux的特性决定了很多时候都需要你给予root权限软件才能运行,这确实使电脑中病毒的几率大大降低了,但是不管你的Linux系统是ubu

  • ng2学习笔记之bootstrap中的component使用教程

     前序: 现在angular2已经除了集成的angular-cli,建议大家可以基于这个来快速开发ng2的项目,不用自己再搭建环境: 相关内容请前往:https://angular.cn/docs/ts/latest/cli-quickstart.html 正文: 以图片轮播组件carousel为例: 首先安装好ng2-bootstrap,bootstrap npm install ng2-bootstrap bootstrap --save 在需要用到的模块中导入 import { Carou

  • vue2中filter()的实现代码

    vue2.0里,不再有自带的过滤器,需要自己定义过滤器.定义的方法如下: 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数. Vue.filter('filtername',function(value,参数){ return 参数+value.split('').reverse().join(''); });1234123 完整代码如下: <!doctype html> <html> <head> <meta charset="UTF-

  • 详解如何在Vue2中实现组件props双向绑定

    详解如何在Vue2中实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu

随机推荐