Version

3.2.19

Reproduction link

codesandbox.io

Steps to reproduce

• Use Vue 3 with SFC and SASS
• Use :deep inside a nested block

<style scoped lang="scss">
:deep {
  // more rules
}

:deep() {
  // more rules
}
</style>

What is expected?

A clear definition in the manual, what is the correct way to do this.

I would expect the first syntax to work at least. For the second syntax I would either expect the same, or a fitting error message, telling me, that this is not allowed.

What is actually happening?

https://v3.vuejs.org/api/sfc-style.html#style-scoped only has an easy example .a :deep(.b), but no nesting together with SASS.

The first syntax works, but brings up a misleading warn message

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead. 

I do not use the (legacy) ::v-deep, but moved to the (new Vue3) :deep.

The second syntax works as intended without any warning. However I am not sure, if this is intended by Vue.

Being not so deep into Vue and its modules and dependencies, I am not sure, whether this is a SASS thing, a Vue thing or whether you two have to figure this out together.

I just lost a few hours searching for an incompatible library, just ending up finding it's still a component of mine and the deprecation message mislead me totally. Hope, this bug report helps others :)

I read and understood, that you don't want to answer questions, but I think the question, whether :deep() { ... } is the right way to go, should be answered (and put into the manual). Thank you! :)

Affected version: I noticed it after upgrading from Vue 2 to 3.1.0, but the issue is also reproducible with latest 3.2.19 (see sandbox)

The new syntax require using :deep (or ::v-deep) as a pseudo function - i.e. the parens are required:

:deep {} /* this is wrong */

:deep(div) {} /* this is correct */

Without parens you are using it as a combinator, which is exactly what the message is warning you about.

Is there any way to disable the warning? We are upgrading an exiting project from Vue 2x to Vue 3. Due to technical reasons out of scope to explain here, we have +12000 lines of scss nested under a single ::v-deep { .. }. It's not an alternative for us to wrap every single class in a :deep(..)

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

::v-deep {
  .v-input--dense {}
  .v-skeleton-loader {}
}

I don't understand how to use :deep() for above scenario.

can anyone help for the same?

@webturtles18 The following worked, but I am not sure if it is the intended use, as @theHacker says.

:deep() {
  .class {}
}

@webturtles18 The following worked, but I am not sure if it is the intended use, as @theHacker says.

:deep() {
  .class {}
}

@monaounagi Didn't work in my case. Gives me the following error: Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js): friendly-errors 15:43:31 ModuleBuildError: Module build failed (from ./node_modules/vue-loader/lib/loaders/stylePostLoader.js): TypeError: Cannot read properties of undefined (reading 'spaces')

I'm having the same issue and would like to see, that ::v-deep could be supported in parallel or maybe to add an option to disable the warning. I'm currently migrating from webpack to vite (at least for development), but this is the last incompatibility I need to overcome (prod=webpack, dev=vite).

I can add that we managed to make it work the same as before using:

:deep() {
  ..
}

If you use less, you can nest styles in two ways.

// component style
@deep: ~':deep()';
@{deep} {
    .cls-1 {}
    .cls-2 {}
}

or

// vite.config.js
export default {
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    'deep': ':deep()'
                }
            },
        },
    },
}

// component style
@{deep} {
    .cls-1 {}
    .cls-2 {}
}

Is there any way to disable the warning? We are upgrading an exiting project from Vue 2x to Vue 3. Due to technical reasons out of scope to explain here, we have +12000 lines of scss nested under a single ::v-deep { .. }. It's not an alternative for us to wrap every single class in a :deep(..)

@yyx990803 we would appreciate a solution to this, we're working with a 200 component Nuxt app and our DX is ruined by the flood of warnings. We don't wanna be warned.

Is there any way to disable the warning? We are upgrading an exiting project from Vue 2x to Vue 3. Due to technical reasons out of scope to explain here, we have +12000 lines of scss nested under a single ::v-deep { .. }. It's not an alternative for us to wrap every single class in a :deep(..)

@yyx990803 we would appreciate a solution to this, we're working with a 200 component Nuxt app and our DX is ruined by the flood of warnings. We don't wanna be warned.

Same problem, someone found a solution? May be some SCSS mixin?

I managed to fix it by wrapping it all in ":deep()"

Is there any way to disable the warning? We are upgrading an exiting project from Vue 2x to Vue 3. Due to technical reasons out of scope to explain here, we have +12000 lines of scss nested under a single ::v-deep { .. }. It's not an alternative for us to wrap every single class in a :deep(..)

@yyx990803 we would appreciate a solution to this, we're working with a 200 component Nuxt app and our DX is ruined by the flood of warnings. We don't wanna be warned.

I managed to fix it by wrapping it all in "deep()"

:deep() {
  ..
}

When I do as you suggested I get an error in the IDE

It would be nice to have a migration guide or conversion script

We cleaned up all the ::v-deep occurrences in our code but I believe the warnings keep happening because third party libraries use still ::v-deep with the old syntax.

I was able to migrate all to :deep, but I've found out that the style is not the same anymore. It doesn't overwrite the css classes.

I am using vue 2 (2.7.10) + nuxt(2.15.8) + vuetify(2.6.10)

I was changing one component that only have this simple css line:

::v-deep.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
  > .v-input__control
  > .v-input__slot {
  padding: 0 4px;
}

This was the result on the final code, it was overwriting vuetify class as it should:

And when changed to

:deep(.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
  > .v-input__control
  > .v-input__slot) {
  padding: 0 4px;
}```

The padding is not being overwritten anymore.

![image](https://user-images.githubusercontent.com/101707687/189876983-51694643-c0a7-46c5-a62c-f8098527b67e.png)

So, I discover that :deep(.class) works the same as ::v-deep .class BUT then... how can I do ::v-deep.class (without spaces) with the new :deep() ?

The new syntax require using :deep (or ::v-deep) as a pseudo function - i.e. the parens are required:

:deep {} /* this is wrong */

:deep(div) {} /* this is correct */

Without parens you are using it as a combinator, which is exactly what the message is warning you about.

vue3 没有根节点，如何用:deep(xxx)进行样式穿透？第一种可行，但会抛出警告，第二种没有效果

<template>
    <my-box-01></my-box-01>
    <my-box-02></my-box-02>
</template>

<style scoped lang="scss">
// 没有效果，这种该怎么写
:deep(.my-box-01) {
    background-color: red;
    .mb-text {
        color: green;
    }
}

</style>

So, I discover that :deep(.class) works the same as ::v-deep .class BUT then... how can I do ::v-deep.class (without spaces) with the new :deep() ?

Would that not be .class:deep() ?

Maybe this will help someone resolve this issue in larger code bases. We made the changes above to use :deep() { ... } and did so using regex find/replace

Find: ::v-deep (.*?) \{ Replace :deep($1) {

And for any that are strung together: Find: ::v-deep (.*?), Replace :deep($1),

@yyx990803 WARN [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

• This warning is really disturbing in console, just because it occurs too much.
• I hope it's displayed less time or removed at all as soon as possible.

Is there any way to disable the warning? We are upgrading an exiting project from Vue 2x to Vue 3. Due to technical reasons out of scope to explain here, we have +12000 lines of scss nested under a single ::v-deep { .. }. It's not an alternative for us to wrap every single class in a :deep(..)

As @adamxi remarked, this feature is expected to come soon. If this is possible, it's not a problem that above warning is shown.

https://github.com/vuejs/core/issues/4745#issuecomment-1254989020

Thank you, that was it!

instead of: ::v-deep.v-text-field .v-input__prepend-inner I used: .v-text-field :deep(.v-input__prepend-inner)

in a case more complicated, instead of: ::v-deep.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-outer I used: .v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined :deep(.v-input__prepend-outer)

And if we've something as: ::v-deep.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded) > .v-input__control > .v-input__slot:hover fieldset Solution would be: .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded) > :deep(.v-input__control > .v-input__slot:hover fieldset)

Hope it helps others

https://github.com/vuejs/core/issues/4745#issuecomment-1256583705

About the regex, I recommend those instead:

This one will do the same as both on comment above: FIND: ::v-deep (.+?)(\s?(\{|,)) REPLACE: :deep($1)$2

And this one for multiple lines: FIND: ::v-deep((\s*\n\s*.+?)*)(\s*(\{|,)) REPLACE: :deep($1)$3

用的nuxt2开发项目，项目代码已经没有::v-deep和>>>语法了，应该是第三方库存在的问题，每次启动编译很长时间都花在打印这个warn上了，有时候甚至会编译超时，希望官方后面能够优化一下这个提示！ 本地开发的话，可以直接注释掉图片对应文件对应的代码即可解决，不过每次重新下载一次都需要重新修改一下，线上因为是自动化部署，每次会下载新的包然后编译，暂时无法解决

I was able to get rid of this warning and another error by constraining Vue version to 2.6 "vue": "2.6.*",. Looks like Vue 2.7 has breaking changes.

A solution is kindly needed for this. Warnings keeps coming up even after removing all ::v-deep occurrences from the code.

A helpful feature is to add a file path or code reference for where the warning is being triggered. This will surely help locating the issue and fix it.

vue2 fixed: v2.7.11 https://github.com/vuejs/vue/releases/tag/v2.7.11 https://github.com/vuejs/vue/commit/2f335b2f9d09b962f40e38740826d444e4fff073

It doesn't look like there's currently a way to disable the warning, although @serialine opened #6785 about it.

In the meantime, one option is to use patch-package to comment out the warning. You'll need to find it in the compiled version at node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js; for me it's on line 9537.

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

::v-deep {
  .v-input--dense {}
  .v-skeleton-loader {}
}

I don't understand how to use :deep() for above scenario.

can anyone help for the same?

hi, do you find any solutions for this?

I find a way to disable the warning, but it does not get the exact same result

:deep(*) {
  .v-input--dense {}
  .v-skeleton-loader {}
}