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

        需求 ： 在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错。

        错误代码：

<style scoped>
 /* 这种写法就会报错 */
/* 原因：>>>是深度选择器，可以作用到子组件中的样式，/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/,因此报错*/
/deep/ .el-menu .el-menu-item {
  background-color: #000!important;
}
</style>

        解决方案：

/* 采用:;v-deep就可以解决上述问题 */
<style scoped>
::v-deep .el-menu .el-menu-item {
  background-color: #000!important;
}
</style>

• >>>

        如果vue的style使用的是css，那么则

<style scoped>
.a >>> .b { 
   /* ... */ 
}
</style>

        但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.

• /deep/

<style scoped>
.a{
   /deep/ .b { 
      /* ... */ 
   }
} 
</style>

        但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。

        此时我们可以使用第三种方式

• ::v-deep

        切记必须是双冒号

<style scoped>
.a{
   ::v-deep .b { 
      /* ... */ 
   }
} 
</style>

        注：若存在::v-deep未生效的情况，确认使用的文件是否为组件级，若为组件级，改为在调用该组件的页面设置::v-deep即可。

• :deep()

        在vue3中项目中使用deep：

<style>
.a{
  :deep(.b){
        /* ... */
}
}
 
</style>

        通过以上内容我们知道了vue 中的深度选择器报错如何解决。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！