在 Vue 我的项目的开发中，很多人都因为想要限度 CSS 款式的作用范畴（防止款式净化的问题）去应用 scope 属性。
然而很多的状况下都会去批改分装好的子组件以及 UI 库中的组件款式，所以常常会用到 款式穿透 这个货色，因为我以前是应用的 Stylus 作为款式预处理器的，所以并没有感觉到什么困惑的中央，然而有很多同学是应用的 Scss 以及 Less 的，对于他们来说什么时候应用 /deep/ 什么时候应用 ::v-deep 是很困扰的。特地是对于一些刚刚进入前端圈的小伙伴们。
正好最近在思否也遇到了很多人来问这样的问题，就像一次性都把相干的疑难都答复了。
💡 我想要书写款式穿透的时候应该怎么办？
在 Vue2 版本中：
- 如果你是应用的
Stylus以及CSS那么不必思考间接应用CSS所反对的>>>来穿透就能够了。 - 如果说你应用的是
Less以及Sass的话，那么举荐应用::v-deep来实现款式穿透的成果。
为什么不应用 /deep 呢，因为当初的 Sass 默认装置的是 dart-sass 如果你应用 /deep/ 会提醒谬误：SassError: expected selector. /deep/，所以间接应用 ::v-deep 预防可能会呈现的问题。
并且最好不要间接应用 ::v-deep 等款式穿透来书写，比如说：
<style scoped lang="scss">
::v-deep .className {...}
</style> 这样的话，其实就和你没有增加 scope 的后果是一样的了，并不会只限度在以后组件内。而会净化到全局款式当中。
并且间接应用 /deep/ .className 可能无奈通过 loader 的编译。
如果说你应用的是 Vue3 的话，就须要把 ::v-deep 替换成 :deep() 了
💡 如果是增加到 body 元素上的组件怎么办，比如说 el-dialog 这种弹窗组件。
个别都会提供一个 custom-class 给你应用，能够借助这个来起一个 className 来给它们增加款式，或者能够间接应用 class 来给以后页面中的弹窗元素起一个 CSS 类名。
而后写在全局就能够了，没有必要通过款式穿穿透来覆写。当然也能够写在 scope 内，因为第一级会被增加上以后组件的 hash 值。来起到限度作用域的要求。
相干浏览
Scoped CSS | Vue Loader
rfcs/0023-scoped-styles-changes.md at master · vuejs/rfcs
vue 深度选择器前世今生 – guangzan – 博客园
本文参加了 SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。