杂记 -- 关于less在vue项目中的使用
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项目中的使用的更多相关文章
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- 去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- Vue项目中GraphQL入门学习与应用
1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...
随机推荐
- OI生涯回顾
OI回忆录只是一个预告,估计等2020高考结束才放出来吧. 先写一下自己简单的OI历程吧: 小升初刚起步 初一 第一次比赛,NOIP PJ组215分,踩线1=,全省rk86,全国rk677(毕竟AH ...
- 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 ...
- 六十一、SAP中的逻辑运算与进制转换
一.代码如下 二.16进制计算过程如下 三.计算结果为16进制的11,也就是10进制的17
- 十九、SAP查询所有数据库表的所有数据
一.我们打款SAP自带的一个演示数据库SCARR 二.表结构如下 三.代码如下 四.执行结果如下 我们对比一下数据库的内容,很perfect 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微 ...
- Day 17:缓冲输出字符流和用缓冲输入输出实现登录、装饰者设计模式
输出字符流 Writer 所有输出字符流的基类, 抽象类. FileWriter 向文件输出字符数据的输出字符流. BufferedWriter 缓冲输出字符流 缓冲输出字符流作用: ...
- 快速搭建单机版Spring Cloud EurekaServer
原文链接:http://www.yiidian.com/springcloud/build-eureka-single.html 本文介绍搭建单机版的Eureka Server服务 1 创建项目,导入 ...
- 使用GDI+显示OpenCV中的图像IplImage
OpenCV虽然自带了轻量级的界面库HighGUI,但是支持的图像化元素实在是太少了,一般只在前期算法测试时使用.实际产品还是使用MFC库.因此本文记录了如何在GDI+中显示OpenCV中的IplIm ...
- microsoft help viewer 收藏夹功能
平时重装系统比较多,重装后,microsoft help viewer 2.0里面的收藏就丢失了,要恢复以前的收藏,可以直接在C:\Users\ZR\AppData\Local\Microsoft\H ...
- mysql 锁表的处理方式
MySQL错误:ERROR 1205 (HY000): Lock wait timeout 处理方案: 执行mysql命令:show full processlist; 然后找出插入语句的 ...
- 给指定的div增加滚动条
这次的需求是给一个指定的div(里面有个table表格)增加上下.左右的滚动条 通过查找资料后找到了一个可用的方法,代码如下: <!--div比table大小要小才会显示--> <d ...