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加载第三方包 ①项目中,如果需要用到一些第 ...
随机推荐
- ajax方式提交文件到后台同时加其他参数
struts2后台Action方法,直接用参数成员变量对象的属性接收即可
- Land of Farms HDU - 5556 二分图匹配
Farmer John and his brothers have found a new land. They are so excited and decide to build new farm ...
- 组合计数 && Stirling数
参考: http://blog.csdn.net/qwb492859377/article/details/50654627 http://blog.csdn.net/acdreamers/artic ...
- 前端PHP入门-002-安装WAMP的集成环境md
> 第一次讲PHP,让我感觉还是满好玩的,一种新的知识的学习,需要我们努力! > 这次PHP课程计划是15天快速入门的课程! 只是单独的讲PHP语言,不涉及很深的内容,只是想让web前端的 ...
- 跟我一起写Makefile(六)
使用条件判断—————— 使用条件判断,可以让make根据运行时的不同情况选择不同的执行分支.条件表达式可以是比较变量的值,或是比较变量和常量的值. 一.示例 下面的例子,判断$(CC)变量是否“gc ...
- jQuery面向对象的写法
定义的写法 //构造函数 function test(){ //construct code } //初始化方法 test.prototype.init = function(){ //init co ...
- CSS3的新属性
1.圆角矩形 .border_radius_test{ border-radius:25px; -moz-border-radius:25px; } 数值越大越圆 2.容器阴影 .box_shadow ...
- protoc
平台安装: 在window 平台使用的工具protoc.zip linux平台的安装方式. 执行在windos平台上执行生成java代码命令: protoc --java_out=./ Keyword ...
- 前端开发进阶:推荐的 CSS 书写规范
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 【有上下界网络流】【ZOJ】2314 Reactor Cooling
[算法]有上下界网络流-无源汇(循环流) [题解]http://www.cnblogs.com/onioncyc/p/6496532.html //未提交 #include<cstdio> ...