• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

我们所能看到的美观的网页都是经过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使用技巧内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
前端JavaScript彻底弄懂函数柯里化curry发布时间:2022-02-05
下一篇:
如何为老vue项目添加vite支持详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap