Deprecation warning- SASS declaration ordering #2161

$ npm run build
> build
> vite build
vite v5.4.2 building for production...
transforming...
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/_reboot.scss
503 │     font-weight: $legend-font-weight;
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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/_reboot.scss 503:3   @import
    node_modules/bootstrap/scss/bootstrap.scss 16:9  @import
    app/javascript/entrypoints/application.scss 1: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/_reboot.scss
504 │     line-height: inherit;
    │     ^^^^^^^^^^^^^^^^^^^^ 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/_reboot.scss 504:3   @import
    node_modules/bootstrap/scss/bootstrap.scss 16:9  @import
    app/javascript/entrypoints/application.scss 1: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
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
    app/javascript/entrypoints/application.scss 1: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
    ╵
    ┌──> 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 39:5      @import
    node_modules/bootstrap/scss/bootstrap.scss 17:9  @import
    app/javascript/entrypoints/application.scss 1: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
40  │       font-weight: $display-font-weight;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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 40:5      @import
    node_modules/bootstrap/scss/bootstrap.scss 17:9  @import
    app/javascript/entrypoints/application.scss 1:9  root stylesheet
WARNING: 22 repetitive deprecation warnings omitted.
✓ 279 modules transformed.

Pulling docker image ruby:3.3.4 ...
Get:1 https://deb.nodesource.com/node_20.x nodistro/main amd64 nodejs amd64 20.17.0-1nodesource1 [31.7 MB]
"bootstrap-vue-next": "^0.24.11"
"vite": "^5.4.2"