vue单文件中scoped样式如何穿透?
在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。
但当引用第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透scoped。处理方式如下:
第一种方式:
(1)使用 >>> 操作符
外层 >>> 第三方组件 { 样式 }
<style scoped>
.a >>> .b { /* ... */ }
</style>
(2)使用 /deep/ 操作符
当使用 sass/scss之类的预处理器无法正确解析 >>>,可以使用deep/ 操作符
外层 /deep/ 第三方组件 { 样式 }
<style scoped>
.a /deep/ .b { /* ... */ }
</style>
vue单文件中scoped样式如何穿透?的更多相关文章
- vue单文件中引用路径的处理
原文地址:vue单文件中引用路径的处理如有错误,欢迎指正! vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <img>, style 中的 background ...
- vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法
vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- 如何手动解析vue单文件并预览?
开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css.html.js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组 ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- VUE2 第六天学习--- vue单文件项目构建
阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
随机推荐
- bzoj3205 [Apio2013]机器人
3205: [Apio2013]机器人 Time Limit: 15 Sec Memory Limit: 128 MBSubmit: 953 Solved: 227[Submit][Status] ...
- redis 配置和使用(C++)
一.Redis简介: Redis为非关系型数据库,Redis是一个Key-Value存储系统.它支持存储的value类型有:string(字符串),list(链表), set(无序集合),zset(s ...
- Java基础-synchronized关键字的用法(转载)
synchronized--同步 顾名思义是用于同步互斥的作用的. 这里精简的记一下它的使用方法以及意义: 当synchronized修饰 this或者非静态方法或者是一个实例的时候,所同步的锁是加在 ...
- openstack日志模块
一.简单的python日志模块介绍 http://www.cnblogs.com/tuzkee/p/3974193.html http://blog.csdn.net/jgood/article/de ...
- Java SE/EE/ME概念理解(Java版本发展历史)
继上一篇文章http://www.cnblogs.com/EasonJim/p/6181981.html中说的区别,其实分析的不够彻底,因此再次在这里做详细的分析. 零.Java与Sun.Oracle ...
- vue-router的link样式设置问题
发现router-link添加上去后文字上会出现下划线,打开调试工具发现router-link其实是由a来实现的,在reset的时候 a { text-decoraction: none; } 至于点 ...
- ssl证书生成方法
一般情况下,如果能找到可用的证书,就可以直接使用,只不过会因证书的某些信息不正确或与部署证书的主机不匹配而导致浏览器提示证书无效,但这并不影响使用. 需要手工生成证书的情况有: 找不到可用的证书 需要 ...
- Android Studio Gradle's dependency cache may be corrupt Re-download dependencies and sync project (requires network)
转:Android studio 快速解决Gradle's dependency cache may be corrupt 和 Gradle配置 gradle-3.*-all.zip快速下载 Andr ...
- CentOS7,安装Tomcat8.5、JDK1.8,并设置开机启动(Linux CentOS Tomcat、JDK+Tomcat、Tomcat开机自启动)
1.下载JDK1.8.Tomcat8 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...
- NOIP模拟赛12
期望得分:100+100+50=250 实际得分:100+100+30=230 A 约数之和(count.pas/c/cpp) TL:1S ML:128MB[Description]我们用 D(x)表 ...