vue项目中less的一些使用小技巧
作者:code_fly 发布时间:2023-07-02 16:51:33
目录
前言
一、样式穿透
1. 什么是样式穿透?
2. 如何使用?
二、混入
1. 什么是混入?
2. 如何使用?
三、 less自动化导入
1. 自动化导入好处
2. 如何实现?
总结
前言
我们所能看到的美观的网页都是经过UI精心设计后,由前端攻城狮搭建的。网页想要有炫酷的样式,就需要用到css来处理,其中不乏会出现大量重复、冗余的代码,这时,像less、sass、scss等样式预处理器就出现了,极大地精简了css代码,提高了开发效率。今天跟着本文一起看看在vue项目中使用less语法如何穿透效果和混入吧~
一、样式穿透
vue项目中的结构是由template、script、style三部分构成。style中的lang属性决定了样式中的语法,设置了scoped属性就可以避免当前页面的样式污染到其他页面。
1. 什么是样式穿透?
自己设置的样式覆盖原有的样式
2. 如何使用?
当我们使用一个封装好的公共组件的时候,我们对组件提供的原有样式不满意,想要调整一下样式。我们不能修改公共组件中的样式,这时候就需要用到样式穿透来帮助我们解决这个问题了。
vue2中写法
代码如下(示例):
<style lang="less" scoped>
/deep/ a {
text-decoration: none;
}
</style>
<style lang="less" scoped>
::v-deep a {
text-decoration: none;
}
</style>
vue3中写法
<style lang="less" scoped>
:deep(a) {
text-decoration: none;
}
</style>
二、混入
1. 什么是混入?
类似于js中的函数,将样式中重复的代码抽离出来,使用的时候可以多次引入。
2. 如何使用?
定义
代码如下(示例):
<style lang="less" scoped>
.abc() {
color: skyblue
}
</style>
使用
<style lang="less" scoped>
p {
font-size: 20px;
.abc();
}
</style>
三、 less自动化导入
1. 自动化导入好处
可以将经常出现的样式文件抽离出来,放到一个less文件中。
然后在需要用到的地方直接使用即可,不用手动引入文件
2. 如何实现?
使用vue-cli的style-resoures-loader插件来完成自动注入到每个vue组件中style标签中
项目根目录下终端中运行vue add style-resources-loader,添加一个vue-cli插件
注:终端窗口中会弹出询问,写入y之后选择less即可
安装完毕后会自动生成vue.config.js文件,在配置中把需要自动导入的less文件地址加上就可以了
代码如下(示例):
const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 配置哪些文件需要自动导入
path.join(__dirname, './src/xx/xx.less')
]
}
}
}
来源:https://juejin.cn/post/7007771919885811720


猜你喜欢
- 目录前言一、函数传参request参数request传两个参数前言有的测试用例,需要依赖于某些特定的case才可以执行,比如登录获取到tok
- 1) ERROR 1222 (21000): The used SELECT statements have a different num
- 目录安装模块XlsxWriter 示例合并Excel数据表头都一样的 excel表头都不一样的 excel表头都不一样的 excel安装模块
- 接上章《pygame实现俄罗斯方块游戏(基础篇1)》继续写俄罗斯方块游戏五、计算方块之间的碰撞在Panel类里增加函数def check_o
- 常用的转换函数是 cast 和 convert,用于把表达式得出的值的类型转换成另一个数据类型,如果转换失败,该函数抛出错误,导致整个事务回
- 本文实例为大家分享了Python socket实现简单聊天室的具体代码,供大家参考,具体内容如下服务端使用了select模块,实现了对多个s
- 之前在学Django时,发现它的模型层非常好用,把对数据库的操作映射成对类、对象的操作,避免了我们直接写在Web项目中SQL语句,当时想,如
- 我就废话不多说啦,还是直接看代码吧!import osimport sysimport djangosys.path.append(r
- 记录:256写SQL最高境界:SELECT * FROM 表名。当然这是一句自嘲。探究一下SQL语句中JOIN的用法,直到经历这个场景,变得
- 1.python安装包下载路径:https://www.python.org/downloads/2我下载安装包路径:https://www
- import socketdef open_tcp_socket(remotehost,servicename): &
- 配置连接数据库DATABASES = { 'default': { 'ENGI
- 00. 什么是 freecache?freecache 是一个用 go 语言实现的本地缓存系统(类似于 lru)。相关的 github 地址
- 禁止鼠标右键:$(document).ready(function(){ $(document).bind("contextmen
- 曾经在使用pycharm的时候找到过这个设置,后来想用的时候怎么都找不到了,今天终于摸索出来,记录一下,防止再次忘记。debug界面中间可以
- 楔子上一篇文章我们探讨了 GIL 的原理,以及如何释放 GIL 实现并行,做法是将函数声明为 nogil,然后使用 with nogil 上
- 一、自定义MyComboBox# MyComboBox.pyfrom PyQt5.QtWidgets import QComboBoxfro
- 直接使用word文档已经难不倒大家了,有没有想过用python构建一个word文档写点文章呢?当然这个文章的框架需要我们用代码一点点的建立,
- 本文实例讲述了python获得两个数组交集、并集、差集的房部分。分享给大家供大家参考。具体如下:1. 获取两个list 的交集#方法一:a=
- 1.函数array()功能:创建一个数组变量格式:array(list)参数:list为数组变量中的每个数值列,中间用逗号间隔例子:<