近期维护一个旧项目, 使用stylus, 过程中发现无法对第三方UI库的样式进行修改, 排查后发现是scoped的作用且stylus对穿透的写法不同，查阅后做此记录

什么是scoped

scoped是Vue中style标签的属性, 可以使组件间的样式互相隔离，仅作用于当前组件, 不影响其他组件

scoped原理

scoped通过PostCss实现, 通过PostCss给定义了scoped的组件中所有的dom元素都添加一个唯一的动态属性, css selector则对应添加属性

🌰

编译前

<template>
  <div>demo</div>
</template>
<style scoped>
  .demo {
    color: blue;
  }
</style>

编译后

<template>
  <div data-v-134e5dc2>demo</div>
</template>
<style scoped>
  .demo[data-v-134e5dc2] {
    color: blue;
  }
</style>

穿透scoped

实际开发中会经常涉及到修改第三方UI库的操作, 但又需要同时保持组件样式独立, 这时候就需要穿透scoped

less/sass

使用/deep/, vue3x使用:deep

.demo {
  /deep/ .el-button {
    color: blue;
  }
}

stylus

使用>>>

 .demo
    >>>.el-button
      color: blue;