1、安装less,less-loader

npm install less less-loader --save

2、配置wepack.js(vue3+版本中不用自己设置)

//添加less路径模块
module: {
rules: [{
test: '/\.less$/',
loader: 'less-loader'
}]
}

3、在vue组件中使用,及其常用用法

  • @x:代表一个定义好的变量
  • 嵌套写法
  • 计算和各种函数进行运算
<style lang="less">//这里写选择语言为less
@import url('../Less/test.less'); //引用less文件
.page1{
margin-top:50px;
background-color: @bgcolor; //@x:是一个定义的变量,变量可以代替属性名,属性值,选择器
p { //嵌套,会被编译成: .page1 p{}
color:red;
}
&:after { //嵌套中&:代指父类
content:'after';
display: block;
width: @width*2; //计算
height:pow(@height,2);//函数运算,可以直接使用多种的运算函数
}
}
</style>

4、设置全局的less变量

安装依赖: vue add style-resources-loader,css预处理选择less

设置vue.config.js:

const path = require("path");

module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, "./src/assets/css/main.less")]//这里放全局的less文件
}
}
}

杂记 -- 关于less在vue项目中的使用的更多相关文章

  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 ...

随机推荐

  1. OI生涯回顾

    OI回忆录只是一个预告,估计等2020高考结束才放出来吧. 先写一下自己简单的OI历程吧: 小升初刚起步 初一 第一次比赛,NOIP PJ组215分,踩线1=,全省rk86,全国rk677(毕竟AH ...

  2. redis : Can't save in background: fork: Cannot allocate memory

    redis : Can't save in background: fork: Cannot allocate memory JAVA程序报错信息: MISCONF Redis is configur ...

  3. 六十一、SAP中的逻辑运算与进制转换

    一.代码如下 二.16进制计算过程如下 三.计算结果为16进制的11,也就是10进制的17

  4. 十九、SAP查询所有数据库表的所有数据

    一.我们打款SAP自带的一个演示数据库SCARR 二.表结构如下 三.代码如下 四.执行结果如下 我们对比一下数据库的内容,很perfect 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微 ...

  5. Day 17:缓冲输出字符流和用缓冲输入输出实现登录、装饰者设计模式

    输出字符流 Writer  所有输出字符流的基类,  抽象类. FileWriter 向文件输出字符数据的输出字符流. BufferedWriter 缓冲输出字符流        缓冲输出字符流作用: ...

  6. 快速搭建单机版Spring Cloud EurekaServer

    原文链接:http://www.yiidian.com/springcloud/build-eureka-single.html 本文介绍搭建单机版的Eureka Server服务 1 创建项目,导入 ...

  7. 使用GDI+显示OpenCV中的图像IplImage

    OpenCV虽然自带了轻量级的界面库HighGUI,但是支持的图像化元素实在是太少了,一般只在前期算法测试时使用.实际产品还是使用MFC库.因此本文记录了如何在GDI+中显示OpenCV中的IplIm ...

  8. microsoft help viewer 收藏夹功能

    平时重装系统比较多,重装后,microsoft help viewer 2.0里面的收藏就丢失了,要恢复以前的收藏,可以直接在C:\Users\ZR\AppData\Local\Microsoft\H ...

  9. mysql 锁表的处理方式

    MySQL错误:ERROR 1205 (HY000): Lock wait timeout   处理方案:   执行mysql命令:show full processlist;   然后找出插入语句的 ...

  10. 给指定的div增加滚动条

    这次的需求是给一个指定的div(里面有个table表格)增加上下.左右的滚动条 通过查找资料后找到了一个可用的方法,代码如下: <!--div比table大小要小才会显示--> <d ...