vue 开发常用工具及配置八:scoped CSS 模块化
- 2020 年 1 月 14 日
- 筆記
目录 1、为什么需要使用 scoped 2、scoped 穿透问题
1、为什么需要使用 scoped ?
当一个style
标签拥有scoped
属性时,它的CSS
样式就只能作用于当前的组件。通过该属性,可以使得组件之间的样式不互相污染,相当于实现了样式的模块化。
scoped
模块化是通过PostCSS
插件实现的,实现原理是怎样的?
如下所示,是编译前的源码:
<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template>
编译后为:
<style> .example[data-v-5558831a] { color: red; } </style> <template> <div class="example" data-v-5558831a>hi</div> </template>
在CSS语法中,div[data-v-5558831a]
表示匹配所有带有data-v-5558831a
属性的div
标签。如下所示代码:
a[href] {color:red;}
只对有href
属性的a
标签应用样式。
在编译阶段,PostCSS
插件通过给html
标签添加data-v-5558831a
属性,并且同时给样式类.example
添加同名修饰符,自动实现了css
模块化。
这便是 scoped
模块化的实现原理。
2、scoped 穿透问题
当在项目中引用了第三方组件,而第三方组件使用了scoped
模块化。此时需要在己方组件中局部修改第三方组件的样式,便涉及到了穿透问题。
由于第三方组件被自动添加了随机的类data-v-5558831a
属性,此时消费方在外围即使使用!important
也是无济于事的。
假设项目中使用element-ui
的table
组件,此时想在己方组件中修改table
组件标题高度。通过检视组件代码发现,其标题类名为.el-table__header-wrapper
。使用穿透法解决问题应如下编码:
<style lang="less" scoped> .el-contain-row /deep/ .el-table__header-wrapper { height: 20px; } </style>
在sass
和less
样式中穿透 使用/deep/
。
又例,在vue
项目中使用了vuetify
框架,如下所示,如果想改变这个按钮的文本颜色:
<v-btn small color="primary" id="button2">测试scoped穿透</v-btn>
外围的穿透样式可以写:
#button2.v-btn /deep/ .v-btn__content{ color: @theme-color; }
源码
https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20200104
参考链接
- http://www.wulinghui.com/show-14-41-1.html
- https://segmentfault.com/a/1190000017508285
- https://2ue.github.io/2017/11/15/vue-style-scoped/
- https://segmentfault.com/q/1010000017229930
专栏列表
基于 vue+go 如何快速进行业务迭代?