Deprecation warnings in the console

[didousoft]

Steps to reproduce

Just pull the project and run it using npm run dev. Node version : v20.16.0

What is expected?

No errors and no warnings in the console

What is actually happening?

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

Additional data

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

┌──> node_modules\vuetify\lib\styles\tools_rounded.sass
2 │ border-radius: $radius if($important, !important, null)
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules\vuetify\lib\styles\tools_states.sass
39 │ ┌ @supports not selector(:focus-visible)
40 │ │ &:focus
41 │ │ #{$selector}
42 │ │ opacity: calc((#{$base} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
│ └─── nested rule
╵
node_modules\vuetify\lib\styles\tools_rounded.sass 2:3 rounded()
node_modules\vuetify\lib\components\VChip\VChip.sass 24:3 @use
plugin-vuetify:components\VChip\VChip.sass 2:1 root stylesheet

Warning: 1 repetitive deprecation warnings omitted.

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

┌──> node_modules\vuetify\lib\styles\tools_elevation.sass
5 │ box-shadow: map.get(settings.$shadow-key-umbra, $z), map.get(settings.$shadow-key-penumbra, $z), map.get(settings.$shadow-key-ambient, $z) if($important, !important, null)
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules\vuetify\lib\styles\tools_border.sass
7 │ ┌ &--border
8 │ │ border-width: $thin-width
9 │ │ box-shadow: none
│ └─── nested rule
╵
node_modules\vuetify\lib\styles\tools_elevation.sass 5:3 elevation()
node_modules\vuetify\lib\components\VToolbar\VToolbar.sass 19:3 @use
plugin-vuetify:components\VToolbar\VToolbar.sass 2:1 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

┌──> node_modules\vuetify\lib\styles\tools_rounded.sass
2 │ border-radius: $radius if($important, !important, null)
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules\vuetify\lib\styles\tools_border.sass
7 │ ┌ &--border
8 │ │ border-width: $thin-width
9 │ │ box-shadow: none
│ └─── nested rule
╵
node_modules\vuetify\lib\styles\tools_rounded.sass 2:3 rounded()
node_modules\vuetify\lib\components\VToolbar\VToolbar.sass 20:3 @use
plugin-vuetify:components\VToolbar\VToolbar.sass 2:1 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
│ └─── nested rule
╵
node_modules\vuetify\lib\styles\tools_theme.sass 2:3 theme()
node_modules\vuetify\lib\components\VToolbar\VToolbar.sass 21:3 @use
plugin-vuetify:components\VToolbar\VToolbar.sass 2:1 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

┌──> node_modules\vuetify\lib\styles\tools_theme.sass
3 │ color: $color
│ ^^^^^^^^^^^^^ declaration
╵
┌──> node_modules\vuetify\lib\styles\tools_border.sass
7 │ ┌ &--border
8 │ │ border-width: $thin-width
9 │ │ box-shadow: none
│ └─── nested rule
╵
node_modules\vuetify\lib\styles\tools_theme.sass 3:3 theme()
node_modules\vuetify\lib\components\VToolbar\VToolbar.sass 21:3 @use
plugin-vuetify:components\VToolbar\VToolbar.sass 2:1 root stylesheet

[yagnikvamja]

Hello @didousoft,

Please note that the following warning is due to breaking changes in Sass and does not impact your template. The issue originates from Vuetify, and it is expected that they will address it in an upcoming release. For further information, you can refer to this issue on GitHub: Vuetify Issue #20139.

For instance, to resolve the warning, you can fix the Sass version to 1.76.0. Please ensure that you do the same for the resolution and override sections in your package.json file.

~Best regards,

[didousoft]

Hello @yagnikvamja ,

Thank you very much for the answer. I changed the version to 1.76.0 and it solved the issue. It worked fine for both dev and production version.

Best regards
HMIDI Daousser