Scss中使用/deep/深度选择器报错

scss中使用/deep/深度选择器报错
前言
一、代码
二、报错
三、解决办法
四、总结
前言
在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错。

一、代码
<style lang="scss" scoped>
/deep/ .el-dialog__header {
  background-color: #81ecec !important;
}
</style>

二、报错
SassError: expected selector.
    ╷
211 │ /deep/ .el-dialog__header{
    │ ^
三、解决办法
使用::v-deep深度选择器，能够解决在scss中无法解析/deep/选择器的问题

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: #81ecec !important;
}
::v-deep .el-button--primary {
  background-color: #81ecec;
  border-color: #81ecec;
}
</style>
四、总结
在vue中，>>>是深度选择器，可以作用到子组件中的样式，/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep