文章目录[隐藏]
目录
前言
我们所能看到的美观的网页都是经过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使用技巧内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！
您可能感兴趣的文章:
- 22个Vue优化技巧(项目实用)
- Vue.js性能优化N个技巧(值得收藏)
- Vue项目中常用的实用技巧汇总
- 关于Vue Router的10条高级技巧总结
- Vue看了就会的8个小技巧
- vue element和nuxt的使用技巧分享
- Vue开发中常见的套路和技巧总结
- 浅谈Vue 函数式组件的使用技巧
- 详解在Vue.js编写更好的v-for循环的6种技巧
- 一定要知道的 25 个 Vue 技巧
本文由 华域联盟 原创撰写：华域联盟 » vue项目中less的一些使用小技巧
转载请保留出处和原文链接：https://www.cnhackhy.com/81619.htm
