vue 开发常用工具及配置八：scoped CSS 模块化

目录

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 如何快速进行业务迭代？