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不行，就一步一步下探，6.0.0   5.0.0

安装less-loader成功后，

npm install --save less

安装less

在webpack.base.config.js的rules里添加

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

在.vue文件的style区，加上lang='less'

1.2 在vue cli3中（vue create xxx）

npm install less-loader -- save-dev

npm install less --save-dev

在.vue文件的style区，加上lang='less'

2.使用

2.1定义变量

@width: 500px;
@height: @width+10px;
@red: #f00;
@transparent: 0.5;
@radius: 30px;

注意变量也可以引用变量

2.2 在属性中使用变量

#app {
  width: @width;
  height: @height;
  background-color: @red;
}

2.3混合（Mixin）

.border() {
  border-radius: @radius;
  border-color: @red;
}

.colors() {
  primary: #3385ff;
  secondary: green;
}

#app {
  width: @width;
  height: @height;
  background-color: @red;
  .border();
}

编译出来就是

#app {
  width: 500px;
  height: 510px;
  background-color: #f00;
  border-radius: 30px;
  border-color: #f00;
}

2.4在引用变量时，做一些运算

  .inner-app {
    width: @width / 2;
    height: @height / 2;
    background-color: #00f;
  }

编译出来是

.inner-app {
  width: 500px / 2;
  height: 510px / 2;
  background-color: #00f;
}

2.5可以以属性名作为变量

 .app2 {
    @width: 200px;
    width: @width;
    height: $width;
    background-color: .colors[secondary]; // .colors在上边Mixin里定义的
  }

编译出来是

.app2 {
  width: 200px;
  height: 200px;
  background-color: green;
}

2.6引用父元素以及祖先元素（&）

#app {
  width: @width;
  height: @height;
  background-color: @red;
  &:hover {
    opacity: @transparent;
    &::after {
      content: "anc";
    }
    &::before {
      content: "xyt";
    }
  }
}

编译出来是

#app:hover {
  opacity: 0.5;
}
#app:hover::after {
  content: "anc";
}
#app:hover::before {
  content: "xyt";
}

注意 &引用的是所有父元素和祖先元素

总结

到此这篇关于vue2中less的安装以及使用教程的文章就介绍到这了,更多相关vue2 less安装使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue2.0设置全局样式(less/sass和css)

    Vue2.0设置全局样式(less/sass和css)

    为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步:在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue1.0版本中可以这样写,但是2.0版本中就不行,会报错提示解析错误 require('./common/less/index.less') 第二步:在build目录下的webpack.base.c

  • 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.0中使用less给元素添加背景图片出现的问题

    在使用less在Vue.js中给元素添加背景图片时 或者你会出现这样的写法 background-image: url('../img/' + @{bg_url} + '2x.png'); 或者这样 background-image: url('../img/' + @bg_url + '2x.png'); 这样 background-image: url(../img/@{bg_url}2x.png); 还有这样 background-image: url(../img/@bg_url2x.p

  • 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不行,就一步一步下探,

  • python中pip的安装与使用教程

    在安装pip前,请确认win系统中已经安装好了python,和easy_install工具,如果系统安装成功,easy_install在目录python的安装盘(如C盘):\Python27\Scripts下面 2.采用cd命令进入到Scripts 目录下面:G:\Python27\Scripts 3.输入命令: easy_install pip,开始安装pip 4. pip安装成功后,在cmd下执行pip,将会有如下提示. 5. pip 是一个安装和管理 Python包的工具,下载相关pyth

  • redis在Windows中下载及安装、设置教程

    一.下载: 下载地址:https://github.com/MicrosoftArchive/redis/releases 根据系统下载的版本:以(64位为例) 下载后一般解压到根目录下:如(E:\Redis-x64-3.2.100) 二.安装: 打开cmd命令窗口,使用命令进行安装和注册redis到window服务 安装命令:redis-server.exe --service-install redis.windows.conf --loglevel verbose 启动服务命令:redis

  • Python 中的pygame安装与配置教程详解

    安装软件环境及版本说明 OS: Win10 x 64 专业版 Python: 2.7 IDE: PyCharm Community 2018 1. 安装python 1)下载并安装python python官网下载需要的版本,并安装(安装过程很简单,步骤略) https://www.python.org/downloads/windows/ 这里下载的是python2.7 2)配置环境变量 如果安装python时,没有勾选添加python到环境变量PATH,则需要手动添加 3)验证是否安装+配置

  • windows server 2008 R2中IIS FTP安装部署图文教程

    windows server 2008 R2中IIS FTP安装部署图文教程

    windows server 2008 R2中IIS FTP安装部署教程,供大家参考,具体内容如下 1.登陆系统,进入开始——>管理工具——>服务器管理 2.选中“角色”——>“ 添加角色” 3.在“添加角色向导”中操作 注:在这里会等待1到5分钟不等. 添加角色完毕. 4. 进入IIS界面 1) 服务器管理器——>角色——>web服务器(IIS)——>Internet 信息服务(IIS),点击进入 2) 开始——>管理工具——>Internet 信息服务(

  • Mac中pyenv的安装与使用教程

    Mac中pyenv的安装与使用教程

    目录 前言 一.pyenv 1.安装 方式一:Git Clone 方式二:Homebrew 2.验证 3.使用 二.virtualenv插件 1.安装 方式一:Git Clone 方式二:Homebrew 2.配置 3.使用 自动激活和退出虚拟环境 三.报错 1.激活指定的虚拟环境时报错 2.还是系统版本 3.安装 python报错 四.注意 五.相关知识 5.1.pyenv能做什么 5.2.pyenv运行 5.3.PATH 5.4.shims 总结 前言 pyenv 可在不同 python 版

  • Python3.6 中的pyinstaller安装和使用教程

    一.安装pyinstaller 先安装anacode,再去安装python.会有很多自带的lib库,可以省去很多麻烦. 1.用国外库安装 pip install pyinstalller 由于国外网络的限制,经常会报以下错误: ERROR: Could not find a version that satisfies the requirement pyinstalller (from versions: none) ERROR: No matching distribution found

  • CentOS7.3中Docker的安装教程

    一.简介 Docker 是一个开源的应用容器引擎,基于Go语言并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. 容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app),更重要的是容器性能开销极低. 本教程适合阅读人员:运维工程师.后端开发人员,通过本教程可以一步一步了解Docker的使用. 二.Docker的应用场景 1. Web 应用的自动化

  • Python 中Django安装和使用教程详解

    一.安装 一般使用cmd 安装就可以 手动安装通过下载方式 django官方网站:https://www.djangoproject.com/ python官方仓库:https://pypi.python.org/pypi/Django 二.配置使用 1.通过cmd新建一个项目,我是在桌面新建 上面命令会在桌面新建pythonDjango文件夹,在里面会生成如下图两个文件 manage.py:命令行工具,可以用多种方式与该django项目进行交互: 在pythonDjango文件夹里面有4个.p

  • jdk在centos中安装配置图文教程

    1下载jdk,地址: http://www.oracle.com/technetwork/java/javase/downloads/index.html 历史版本下载:打开页面拉到底部. 选择自己要的版本下载.我这里下载的是jdk-7u80-linux-x64.rpm 2删除系统自带jdk 查看是否安装了openjdk使用命令 rpm -qa | grep jdk sudo yum remove xxx(上面查询到的名字) 3修改安装包权限 sudo chmod 777 jdk-7u80-li

随机推荐