::v-deep is not working

[handhikadj]

Version

2.7.8

Reproduction link

codesandbox.io

Steps to reproduce

look at the .Vue components and the result tab

What is expected?

::v-deep is working

What is actually happening?

::v-deep is not working

---

I got projects and v-deep is working. don't know why it's not working on this one. I don't think I'm doing wrong on the sandbox, am I?

[donaf]

In you demo, in package.json , i have not see any dependencies about sass 、sass-loader if you want to use like this:

<style lang="scss" scoped>
::v-deep .h3 {
  color: blue !important;
}
</style>

you'll need to install sass-loader

yarn add -D sass-loader sass

or, you can use as this:

<style  scoped>
>>> .h3 {
  color: blue !important;
}
</style>

[handhikadj]

thanks for responding. still not working anyway: https://codesandbox.io/s/distracted-panna-t1xvx6

[yixiu025]

I tried it and found that this is the result, but I don't know why, looking forward to the reply from God...

[JC-Guy]

use :deep() instead. e.g. :deep(.el-card__body){ width: 200px; }

[yyx990803]

CodeSandbox does not correctly support Vue 2.7. Don't use it for reproducing issues.

::v-deep is working correctly in local Vue CLI or Vite based projects.