::v-deep is not working

This issue has been tracked since 2022-07-27.

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 wrote this answer on 2022-07-28

In you demo, in package.json , i have not see any dependencies about sasssass-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 wrote this answer on 2022-07-28

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

yixiu025 wrote this answer on 2022-07-28

image
image
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 wrote this answer on 2022-08-08

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

yyx990803 wrote this answer on 2022-08-19

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.

More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-10-03
Star Count 199758
Watcher Count 6095
Fork Count 32874
Issue Count 590

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date