dart-sass 1.80.0+ throwing a lot of deprecations

[KieranP]

Prerequisites

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

Describe the issue

dart-sass has deprecated a bunch of things that bootstrap currently uses:

• @import has been deprecated in favor of @use
• Global built-in functions such as color
• How CSS values after a & block behave

frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 1 │ @import "mixins/banner";
frontend  |   │         ^^^^^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 1:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 7 │ @import "functions";
frontend  |   │         ^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 7:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 8 │ @import "variables";
frontend  |   │         ^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 9 │ @import "variables-dark";
frontend  |   │         ^^^^^^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 9:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 10 │ @import "maps";
frontend  |    │         ^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 10:9                @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 207 │   @return mix(white, $color, $weight);
frontend  |     │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 207:11             tint-color()
frontend  |     ../../../bootstrap/scss/_variables.scss 79:12              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 212 │   @return mix(black, $color, $weight);
frontend  |     │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 212:11             shade-color()
frontend  |     ../../../bootstrap/scss/_variables.scss 84:12              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 342 │ $light-bg-subtle:         mix($gray-100, $white) !default;
frontend  |     │                           ^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_variables.scss 342:27             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use math.unit instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 11 │     @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
frontend  |    │                              ^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 11:30              -assert-ascending()
frontend  |     ../../../bootstrap/scss/_variables.scss 494:1              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use math.unit instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 11 │     @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
frontend  |    │                                                   ^^^^^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 11:51              -assert-ascending()
frontend  |     ../../../bootstrap/scss/_variables.scss 494:1              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: red() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "red", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 185 │     "r": red($color),
frontend  |     │          ^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 185:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: green() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "green", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 186 │     "g": green($color),
frontend  |     │          ^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 186:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: blue() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "blue", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 187 │     "b": blue($color)
frontend  |     │          ^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 187:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: red() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "red", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |    ╷
frontend  | 37 │   @return red($value), green($value), blue($value);
frontend  |    │           ^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 37:11              to-rgb()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:31             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: green() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "green", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |    ╷
frontend  | 37 │   @return red($value), green($value), blue($value);
frontend  |    │                        ^^^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 37:24              to-rgb()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:31             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_reboot.scss
frontend  | 503 │     font-weight: $legend-font-weight;
frontend  |     │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_reboot.scss 503:3                 @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 16:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_reboot.scss
frontend  | 504 │     line-height: inherit;
frontend  |     │     ^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_reboot.scss 504:3                 @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 16:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 38  │       font-family: $display-font-family;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 38:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 39  │       font-style: $display-font-style;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 39:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 40  │       font-weight: $display-font-weight;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 40:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Warning: 254 repetitive deprecation warnings omitted.
frontend  | Run in verbose mode to see all warnings.
frontend  |
frontend  | 8:23:08 am [vite] hmr update /stylesheets/application.scss
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 1 │ @import "mixins/banner";
frontend  |   │         ^^^^^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 1:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 7 │ @import "functions";
frontend  |   │         ^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 7:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 8 │ @import "variables";
frontend  |   │         ^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 9 │ @import "variables-dark";
frontend  |   │         ^^^^^^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 9:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 10 │ @import "maps";
frontend  |    │         ^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 10:9                @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 207 │   @return mix(white, $color, $weight);
frontend  |     │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 207:11             tint-color()
frontend  |     ../../../bootstrap/scss/_variables.scss 79:12              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 212 │   @return mix(black, $color, $weight);
frontend  |     │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 212:11             shade-color()
frontend  |     ../../../bootstrap/scss/_variables.scss 84:12              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 342 │ $light-bg-subtle:         mix($gray-100, $white) !default;
frontend  |     │                           ^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_variables.scss 342:27             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use math.unit instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 11 │     @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
frontend  |    │                              ^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 11:30              -assert-ascending()
frontend  |     ../../../bootstrap/scss/_variables.scss 494:1              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use math.unit instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 11 │     @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
frontend  |    │                                                   ^^^^^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 11:51              -assert-ascending()
frontend  |     ../../../bootstrap/scss/_variables.scss 494:1              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: red() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "red", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 185 │     "r": red($color),
frontend  |     │          ^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 185:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: green() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "green", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 186 │     "g": green($color),
frontend  |     │          ^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 186:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: blue() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "blue", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 187 │     "b": blue($color)
frontend  |     │          ^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 187:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: red() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "red", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |    ╷
frontend  | 37 │   @return red($value), green($value), blue($value);
frontend  |    │           ^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 37:11              to-rgb()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:31             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: green() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "green", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |    ╷
frontend  | 37 │   @return red($value), green($value), blue($value);
frontend  |    │                        ^^^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 37:24              to-rgb()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:31             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_reboot.scss
frontend  | 503 │     font-weight: $legend-font-weight;
frontend  |     │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_reboot.scss 503:3                 @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 16:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_reboot.scss
frontend  | 504 │     line-height: inherit;
frontend  |     │     ^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_reboot.scss 504:3                 @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 16:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 38  │       font-family: $display-font-family;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 38:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 39  │       font-style: $display-font-style;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 39:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 40  │       font-weight: $display-font-weight;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 40:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Warning: 254 repetitive deprecation warnings omitted.
frontend  | Run in verbose mode to see all warnings.
frontend  |

Reduced test cases

Just import bootstrap into project using dart-sass >= 1.80.0

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

macOS, Linux

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

No response

What version of Bootstrap are you using?

5.3.3

[julien-deramond]

This was mentioned in this comment while searching for a solution to the deprecations introduced in version 1.79. Dropping Node Sass will be necessary to fix this issue.

In the meantime, a few options for Bootstrap users:

• Pinning the sass dependency
• Silencing the deprecation warnings
• Ignoring the warnings, as the deprecated features remain usable for now

[kliehm]

@julien-deramond Also for overwriting SASS variables, it is necessary to set the variables like $grid-breakpoints before and then import bootstrap-grid. Since @import is deprecated, how would this work with @use, which needs to be at the start of the code?

[TimJohns]

This was mentioned in this comment while searching for a solution to the deprecations introduced in version 1.79. Dropping Node Sass will be necessary to fix this issue.

In the meantime, a few options for Bootstrap users:

• Pinning the sass dependency
• Silencing the deprecation warnings
• Ignoring the warnings, as the deprecated features remain usable for now

Thanks @julien-deramond and team - as always, I appreciate all the work that's gone into Bootstrap, as well as the guidance on this issue.

For anyone looking for a quick starting point for their own vite.config.ts to temporarily silence the deprecation warnings, this is mine (I'm using Bootstrap 5.3.3, sass 1.80.5, Vue 3.5.12, Vike 0.4.199, ssr/ssg in effect, with a slightly customized scss/styles.css):

    css: {
      preprocessorOptions: {
        scss: {
          silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import']
        },
      }
    },

[maalvarado]

This one works for Webpack:

{
  loader: 'sass-loader',
  options: {
    sassOptions: {
      silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import'],
    }
  }
}

[rob4226]

I use this config with Webpack and set the sass quietDeps option to hide any warnings from dependencies like bootstrap.

The @import warning comes from our own project's code importing bootstrap so still need to globally silence that warning:

{
  loader: 'sass-loader',
  options: {
    // https://github.com/webpack-contrib/sass-loader#sassoptions
    sassOptions: {
      // If set to true, Sass won’t print warnings that are caused by dependencies (like bootstrap):
      // https://sass-lang.com/documentation/js-api/interfaces/options/#quietDeps
      quietDeps: true,
      silenceDeprecations: ['import'],
    },
  },
}

[evgeniy-vashchuk]

For everyone using Gulp who also wants to temporarily hide these warnings, the silenceDeprecations option also works:

.pipe(sass({
    silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'color-functions', 'global-builtin', 'import'],
    outputStyle: config.isProd ? 'compressed' : 'expanded',
    indentType: 'space',
    indentWidth: 2,
    includePaths: ['./node_modules']
}).on('error', plugins.notify.onError({ title: 'Error compiling SASS' })))

[navidemad]

If you are using Ruby on Rails with the gem https://github.com/rails/dartsass-rails, you can do:

config/initializers/dartsass.rb:

Rails.application.config.dartsass.build_options |= ["--silence-deprecation=import"]

.sassrc:

{
  "includePaths": ["node_modules"],
  "silenceDeprecations": [
    "import"
  ],
  "quietDeps": true
}