vue中使用深度选择器修改第三方UI库默认样式时,/deep/报错不生效

在vue项目中,引用了第三方UI库(如vant-ui),此时想在某个组件里面更改vant-Ui的样式,而不影响全局,发现直接用它里面组件的类名去修改无效果。

这时候想到了用深度选择器解决这个问题,但是发现使用了 /deep/报错

这很可能是使用了scss编译的问题
vue中使用深度选择器修改第三方UI库默认样式时,/deep/报错不生效
然后改成 >>> 也是不报错了但是也不生效的,最后发现 可以改成 ::deep

深度选择器总结:
官方深度选择器解释:

深度选择器一般用于组件开发,修改组件内的某些样式

深度选择器表示种类:

  1. “/deep/”
  2. “>>>”
  3. “::deep”
  4. “:v-deep”