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加载第三方包 ①项目中,如果需要用到一些第 ...
随机推荐
- 电子商务(电销)平台中系统设置模块(SysSetting)数据库设计明细
以下是自己在电子商务系统设计中的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 邮件服务器 (sys_smtp_server)|-- 自动编号|-- SMTP服务器地址 (host ...
- Codeforces 576D. Flights for Regular Customers(倍增floyd+bitset)
这破题调了我一天...错了一大堆细节T T 首先显然可以将边权先排序,然后逐个加进图中. 加进图后,倍增跑跑看能不能到达n,不能的话加新的边继续跑. 倍增的时候要预处理出h[i]表示转移矩阵的2^0~ ...
- 【bzoj2318】game with probability
Portal -->bzoj2318 Description Alice和Bob在玩一个游戏.有n个石子在这里,Alice和Bob轮流投掷硬币,如果正面朝上,则从n个石子中取出一个石子,否则不做 ...
- Linux之GDB调试介绍与应用20170601
一.GDB调试命令 描述 backtrace(或bt) 查看各级函数调用及参数 finish 连续运行到当前函数返回为止,然后停下来等待命令 frame(或f) 帧编号 选择栈帧 info(或i) ...
- _MSC_VER
https://msdn.microsoft.com/en-us/library/vstudio/b0084kay.aspx Evaluates to an integer literal that ...
- laravel5.5 不能正常自动回复的问题
虽然开启了APP_DEBUG 但是 log 却没有记录任何错误信息,后来经过测试发现原来是路由问题,因为微信服务器发送消息是使用 post 方法,但是我的路由定义只定义了 get (tp 用多了习惯了 ...
- Codeforces 833B The Bakery dp线段树
B. The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard inp ...
- mobiscroll 案例git
https://github.com/zhoushengmufc/iosselect
- CollectionUtils.isEqualCollection的用法
在使用Java的集合时,有些时候会需要比较两个集合是否相等,自己写方法其实也简单,但是既然有了好的实现,就不要自己造轮子了,只要了解这个轮子是什么原理就好了. public static boolea ...
- Codeforces Round #191 (Div. 2) B. Hungry Sequence(素数筛选法)
. Hungry Sequence time limit per test 1 second memory limit per test 256 megabytes input standard in ...