vue项目中less的一些使用小技巧
前言
我们所能看到的美观的网页都是经过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')
]
}
}
}
总结
到此这篇关于vue项目中less的一些使用小技巧的文章就介绍到这了,更多相关vue中less使用技巧内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
虽然Vue.js作为一个现代化的前端框架,鼓励使用其自身的响应式机制来处理DOM操作,但在某些情况下,尤其是在需要维护旧系统的项目中,可能会遇到需要引入jQuery的情况,本文将详细讲解如何在Vue项目中引入jQuery,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue 判断两个时间插件结束时间必选大于开始时间的代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
这篇文章给大家介绍了基于vue实现拖动滑块验证功能，代码引用css与js都是线上的，将代码全部复制到一个html中可以直接打开，超级简单，感兴趣的朋友跟随脚本之家小编一起看看吧2018-08-08
这篇文章主要给大家介绍了关于如何用Vue3切换中英文显示的相关资料,在Vue3中使用vue-i18n进行国际化设置,包括安装、配置、在组件中使用$t方法获取翻译字符串,以及可选的动态加载语言包以提高性能,需要的朋友可以参考下2024-11-11
vue3实战-axios请求封装问题(get、post、put、delete)
这篇文章主要介绍了vue3实战-axios请求封装问题(get、post、put、delete)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
AES对数据传输加密、解密处理---AES.js，下面分步骤给大家介绍vue使用AES.js的示例代码，感兴趣的朋友跟随小编一起看看吧2021-10-10
这篇文章主要为大家介绍了Vue3组件异步更新和nextTick运行机制源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
vue3组件的v-model:value与v-model的区别解析
在Vue3中,v-model和v-model:value都是用于实现双向数据绑定的语法糖,但v-model:value提供了更显式和灵活的绑定方式,允许你明确指定绑定的属性名和事件名,它们的主要区别在于默认行为、灵活性、多模型绑定和使用场景,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要为大家详细介绍了Vue自定义模态对话框弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了vue子页面控制父页面刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论