文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue项目中less的一些使用小技巧

2024-04-02 19:55

关注

前言

我们所能看到的美观的网页都是经过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 add style-resources-loader,添加一个vue-cli插件

注:终端窗口中会弹出询问,写入y之后选择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使用技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯