1.安装less less-loader

npm i -D less less-loader

2.在 .vue文件中使用lang="less"和@import

// home.lessc
@base-color: #39c;
@part-color: #3c9;
<style lang="less">
@import './home.less';
.triangle {
width:;
height:;
margin: 20px;
border: 40px solid;
border-color: @base-color transparent transparent transparent;
}
</style>

或者直接在该.vue的style中声明自定义样式:

<style lang="less">
@base-color: #39c;
.triangle {
width:;
height:;
margin: 20px;
border: 40px solid;
border-color: @base-color transparent transparent transparent;
}
</style>

vue项目中使用less的更多相关文章

  1. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  2. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  3. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  4. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  5. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  6. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  7. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  8. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  9. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

  10. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

随机推荐

  1. SESSION劫持

    服务端和客户端之间是通过session(会话)来连接沟通.当客户端的浏览器连接到服务器后,服务器就会建立一个该用户的session.每个用户的session都是独立的,并且由服务器来维护.每个用户的s ...

  2. 虚拟化KVM之概述(一)

    云计算基本概述 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问,进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用程序,服务),这些资源能够被快速提供,只需投入很 ...

  3. 【Django】runserver 0.0.0.0:0 后,究竟发生了什么

    WSGI协议 Django是遵循WSGI协议设计的 WSGI协议主要包括server和application两个部分: WSGI server:负责从客户端接收请求,将request转发给applic ...

  4. docker中安装nginx,部署前端代码

    最近在学习docker,初次接触,难免遇到磕磕碰碰,遂将其整理成博客,以便日后查看. 1.拉取nginx镜像 直接从官方镜像库拉取简单粗暴: docker pull nginx 2.运行 docker ...

  5. 1月份中国综合PMI指数为53.2% 企业生产经营活动总体增速加快

    中新社北京1月31日电 (记者 王恩博)中国国家统计局31日发布数据显示,2019年1月份,中国综合PMI产出指数为53.2%,比上月上升0.6个百分点,表明中国企业生产经营活动总体增速加快. 其中, ...

  6. bootstrap-导航(垂直分组)

    1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8 ...

  7. 数学--数论--HDU2136 Largest prime factor 线性筛法变形

    Problem Description Everybody knows any number can be combined by the prime number. Now, your task i ...

  8. 惠普 HP Pavilion 15 Notebook PC清灰教程总结 惠普g4系列清灰加内存条教程

    最近天气热的电脑都受不了,风扇总是异响,声音很大,感觉是散热不行了,就把电脑清一下灰,虽然之前也清过,但是基本都忘记了,机子比较老,找不到具体教程,清灰过程中因为不熟悉有点费劲,手动记录一下,方便下次 ...

  9. python数据统计分析

    1. 常用函数库   scipy包中的stats模块和statsmodels包是python常用的数据分析工具,scipy.stats以前有一个models子模块,后来被移除了.这个模块被重写并成为了 ...

  10. 第3章:关系数据库标准语言 SQL

    目录 第3章:关系数据库标准语言 SQL 3.1.SQL概述 3.1.1.历史 3.3.2.SQL语言的功能 3.3.3.SQL的特点 3.3.4.基本概念 3.2.学生-课程数据库 3.3.数据定义 ...