vue项目中less的一些使用小技巧
更新时间：2021年09月15日 14:27:32 作者：code_fly
前段时间一直在学习vue,开始记录一下遇到的问题,下面这篇文章主要给大家介绍了关于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不同环境配置不同的打包命令，主要包括正式环境、测试环境和开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
以简单的树形组件为案例,实现在组件中递归组件,下面这篇文章主要给大家介绍了关于Vue实现递归组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了socket io与vue-cli的结合使用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本篇文章主要介绍了vue.js实现仿原生ios时间选择组件实例代码，具有一定的参考价值，有兴趣的可以了解一下。2016-12-12
这篇文章主要介绍了Vue在启动时卡住了,启动不了的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue-cli3使用postcss-plugin-px2rem方式
这篇文章主要介绍了vue-cli3使用postcss-plugin-px2rem方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这周工作中遇见了一个表格动态列的需求,下面这篇文章主要给大家介绍了关于vue element-ui表格自定义动态列具体实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue文件如何转换成base64并去除多余的文件类型前缀问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue实现定时刷新数据,每隔5分钟执行一次问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了关于vue项目中搜索节流的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
最新评论