Deprecation Warning with sass 1.78

[RobineSavert]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

I recently updated the sass package to version 1.78 & use Bootstrap latest version 5.3.3

Now I'm getting deprecation warnings when running npm. I found the same issue reported and the only fixes were to either downgrade or silence the warnings.

This is not good enough, I want to fix this.

Is there a way to fix this in our project? Will this be fixed in the next Bootstrap version?

The warnings:

_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\bootstrap\scss\_type.scss

38 │ font-family: $display-font-family; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration ╵ ┌──> node_modules\bootstrap\scss\vendor_rfs.scss 136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) { 137 │ │ @content; 138 │ │ } │ └─── nested rule ╵ node_modules\bootstrap\scss_type.scss 38:5 @import node_modules\bootstrap\scss\bootstrap.scss 17:9 @import src\assets\scss\styles.scss 23:9 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\bootstrap\scss\_type.scss

39 │ font-style: $display-font-style; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration ╵ ┌──> nodemodules\bootstrap\scss\vendor_rfs.scss 136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) { 137 │ │ @content; 138 │ │ } │ └─── nested rule ╵

Reduced test cases

Install a Vite project with Vue Composition API (latest version) and install the latest version of sass (1.78.0) and bootstrap (5.3.3). Run "npm run serve" and see the deprecation warnings.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.3

[julien-deramond]

Duplicate of https://github.com/twbs/bootstrap/issues/40621. A patch has already been merged and will be in the next release, in the meantime, you can have some more information in the linked issue.

[RobineSavert]

@julien-deramond The linked issue doesn't state that the issue will be resolved in a next version and as stated in my original posts, the only solutions are silencing the warnings or downgrading..

Apologies, the message that it will be fixed in the new version was hidden items.. thanks!