bootstrap dart-sass 1.80.0+ throwing a lot of deprecations

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

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

Oct 21 '24 19:10 KieranP

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

Oct 21 '24 20:10 julien-deramond

@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?

Oct 30 '24 13:10 kliehm

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']
        },
      }
    },

Oct 30 '24 19:10 TimJohns

This one works for Webpack:

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

Oct 30 '24 20:10 maalvarado

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'],
    },
  },
}

Nov 02 '24 11:11 rob4226

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' })))

Nov 12 '24 11:11 evgeniy-vashchuk

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
}

Nov 17 '24 16:11 navidemad

@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?

I tried to migrate my own code but got stuck with bootstrap because it does not use the new functionalities. But I figured out how to use variables without declaring them before and after:

Here is a simple explanation if you want to override the navbar variables with default bootstrap variables.

/*
 Before
*/

// had to copy the variables from bootstrap if you want to use them without changing them because they are  not imported yet
$primary: #00b5ff;
$gray-900: #212529;
$body-color: $gray-900;

$navbar-default-color: $body-color;
$navbar-default-link-color: $body-color;
$navbar-default-link-hover-color: $primary;
$navbar-default-link-active-color: $primary;

/*
After
*/

// path to the bootstrap variable file
@use "../../../../../../../../node_modules/bootstrap/scss/variables" as bs_vars; // with `as` you can use a custom name for the "import"

$navbar-default-color: bs_vars.$body-color;
$navbar-default-link-color: bs_vars.$body-color;
$navbar-default-link-hover-color: bs_vars.$primary;
$navbar-default-link-active-color: bs_vars.$primary;

The only "issue" here is, that we have to add the @use into every file where we want to use the variables.

:warning: This does not work yet with bootstrap. Currently you get an error:

Nov 27 '24 12:11 erkenes

This works for overriding variables with the use syntax and dart-sass:

$my-primary: steelblue;

@use "bootstrap/scss/bootstrap" as bs with (
  $enable-rounded: true,
  $enable-shadows: true,
  $enable-gradients: false,
  $enable-transitions: true,
  $primary: $my-primary
);

This clears up the import deprecation warnings for me with angular v19, which is using dart-sass 1.80.7 under the hood.

Dec 03 '24 22:12 jptrosclair

A note that Vite v6 now defaults to SASS Modern API by default.

While adding api: "legacy" helps, Vite v7 will remove this functionality entirely. With the current pace of Boostrap updates, I worry that there will not be enough time to accommodate for the 12 month or less Vite release cycle.

Dec 05 '24 02:12 TheSeg

@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?

I tried to migrate my own code but got stuck with bootstrap because it does not use the new functionalities.

But I figured out how to use variables without declaring them before and after:

Here is a simple explanation if you want to override the navbar variables with default bootstrap variables.
/*

 Before

*/



// had to copy the variables from bootstrap if you want to use them without changing them because they are  not imported yet

$primary: #00b5ff;

$gray-900: #212529;

$body-color: $gray-900;



$navbar-default-color: $body-color;

$navbar-default-link-color: $body-color;

$navbar-default-link-hover-color: $primary;

$navbar-default-link-active-color: $primary;
/*

After

*/



// path to the bootstrap variable file

@use "../../../../../../../../node_modules/bootstrap/scss/variables" as bs_vars; // with `as` you can use a custom name for the "import"



$navbar-default-color: bs_vars.$body-color;

$navbar-default-link-color: bs_vars.$body-color;

$navbar-default-link-hover-color: bs_vars.$primary;

$navbar-default-link-active-color: bs_vars.$primary;
The only "issue" here is, that we have to add the @use into every file where we want to use the variables.

:warning: This does not work yet with bootstrap. Currently you get an error:

I have made a package to have all scss bootstrap files using the use instead of import, maybe you can try it: https://www.npmjs.com/package/bootstrap-sass-modules

There is still some warning I have to fix for &{}.

For your comment about the need to add the use in each file, it's the new way of SASS. It's not a bad thing, just some mental model to change.

Dec 05 '24 20:12 bastienmoulia

In Rollup with rollup-plugin-postcss plugin, you can silence it like this:

    postcss({
        use: {
            sass: {
                silenceDeprecations: ['legacy-js-api', 'import']
            }
        }
    }),

Dec 11 '24 19:12 SasSam

This works for overriding variables with the use syntax and dart-sass:
$my-primary: steelblue;

@use "bootstrap/scss/bootstrap" as bs with (
  $enable-rounded: true,
  $enable-shadows: true,
  $enable-gradients: false,
  $enable-transitions: true,
  $primary: $my-primary
);
This clears up the import deprecation warnings for me with angular v19, which is using dart-sass 1.80.7 under the hood.

I have these imports no idea how to handle this

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// include what we are using this seems to be the minimum
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/bootstrap-utilities';
@import 'bootstrap/scss/bootstrap-grid'; // row and col
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/alert';
@import 'bootstrap/scss/images';
@import 'bootstrap/scss/modal';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/utilities';

Jan 06 '25 14:01 ricardosaracino

This works for overriding variables with the use syntax and dart-sass:
$my-primary: steelblue;

@use "bootstrap/scss/bootstrap" as bs with (
  $enable-rounded: true,
  $enable-shadows: true,
  $enable-gradients: false,
  $enable-transitions: true,
  $primary: $my-primary
);
This clears up the import deprecation warnings for me with angular v19, which is using dart-sass 1.80.7 under the hood.

Any ideas how to resolve something like this


@use 'src/styles/variables' as *;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  success: $success,
  info: $info,
  warning: $warning,
  danger: $danger,
  light: $surface,
  dark: $gray
) !default;

// Button
$btn-border-radius: $custom-radius;
$btn-border-radius-lg: $custom-radius;
$btn-font-size: 0.875rem;
$alert-border-radius: 0;
$modal-backdrop-bg: rgb(0, 0, 0, 0.5);
$min-contrast-ratio: $custom-contrast-ratio;

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// include what we are using this seems to be the minimum
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/bootstrap-utilities';
@import 'bootstrap/scss/bootstrap-grid'; // row and col
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/alert';
@import 'bootstrap/scss/images';
@import 'bootstrap/scss/modal';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/utilities';

Jan 06 '25 14:01 ricardosaracino

This works for overriding variables with the use syntax and dart-sass:
$my-primary: steelblue;

@use "bootstrap/scss/bootstrap" as bs with (
  $enable-rounded: true,
  $enable-shadows: true,
  $enable-gradients: false,
  $enable-transitions: true,
  $primary: $my-primary
);
This clears up the import deprecation warnings for me with angular v19, which is using dart-sass 1.80.7 under the hood.

Any ideas how to resolve something like this

@use 'src/styles/variables' as *;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  success: $success,
  info: $info,
  warning: $warning,
  danger: $danger,
  light: $surface,
  dark: $gray
) !default;

// Button
$btn-border-radius: $custom-radius;
$btn-border-radius-lg: $custom-radius;
$btn-font-size: 0.875rem;
$alert-border-radius: 0;
$modal-backdrop-bg: rgb(0, 0, 0, 0.5);
$min-contrast-ratio: $custom-contrast-ratio;

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// include what we are using this seems to be the minimum
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/bootstrap-utilities';
@import 'bootstrap/scss/bootstrap-grid'; // row and col
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/alert';
@import 'bootstrap/scss/images';
@import 'bootstrap/scss/modal';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/utilities';

Could you find a solution?

Jan 10 '25 19:01 Alpine418

@jnessier @ricardosaracino

I'm sorry, but I do not have a solution. I've spent some time this evening playing around with it and what I've found is that:

You cannot import individual parts of bootstrap with @use. It errors out whenever I attempt to.
You cannot override bootstrap variables outside of using with () on the @use statement. The dart-sass documentation says you can override them afterwards, and while that compiles, it ultimately has no affect on the produced css- all of the defaults are present.
- I attempted with @use "sass:map"; @use "boostrap/scss/bootstrap" as bs; bs.$theme-colors: map.set(bs.$theme-colors, "light", bs.$gray-500);
You cannot reference bootstrap's own variables within the with () syntax. That means you can't easily override specific parts of a map variable, such as what you were doing with light and dark on the $theme-colors map. Instead you have to completely rebuild the map from scratch because you also cannot @use "bootstrap/scss/_variables" from bootstrap without errors nor can you @use "bootstrap/scss/bootstrap" more than once even if you give each instance its own namespace.
- Going by this issue, I don't think that will change in the future. This is also where it's suggested to change configuration after the @use, which does not work for me at least (noted in my second point above).

Unfortunately, I believe clearing up these deprecations with newer versions of dart-sass is going to require a serious overhaul of how bootstrap's own SCSS is written. For the time being (I would expect probably for the life of bootstrap@5 at least) you're going to have to live with the deprecation messages from the sass compiler or suppress them. Eventually they will turn into breaking changes. The documentation says that will be when dart-sass 3.0 is released.

Jan 11 '25 04:01 jptrosclair

@jptrosclair Thanks for your large response. I've also spent some time yesterday to find a solution. I learned a lot about SASS, but nothing to get a workaround except of suppressing the deprecation messages.

I really looks like that Bootstrap has to totally overhaul their SCSS. So get ready for a rewritten Bootstrap SCSS in the next major release. Personally I see it as a chance to get an even more modularized Bootstrap than today.

Jan 11 '25 18:01 Alpine418

Just ran into this on a new Rails 8 project with Boootstrap 5. @jptrosclair and @Alpine418 explained, there is no easy solution to resolve actual warnings, but if you want to just silence them until new Bootstrap ( rebuilt for Dart 3.0) comes out, here is a simple way to silence warnings.

Notice CLI flags for sass

--silence-deprecation=import --quiet-deps

I'm using bun v 1.1.42 and my sass compiler is 1.83.1 compiled with dart2js 3.6.0 but relevant CLI flags for sass been around

━━━ Warnings ━━━━━━━━━━━━━━━━━━━━━━━━━━━
-q, --[no-]quiet               Don't print warnings.
    --[no-]quiet-deps          Don't print compiler warnings from dependencies.
                               Stylesheets imported through load paths count as dependencies.
    --[no-]verbose             Print all deprecation warnings even when they're repetitive.
    --fatal-deprecation        Deprecations to treat as errors. You may also pass a Sass
                               version to include any behavior deprecated in or before it.
                               See https://sass-lang.com/documentation/breaking-changes for
                               a complete list.
    --silence-deprecation      Deprecations to ignore.
    --future-deprecation       Opt in to a deprecation early.

Here is entire package.json file from my Rails project

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.20",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "nodemon": "^3.1.9",
    "postcss": "^8.4.49",
    "postcss-cli": "^11.0.0",
    "sass": "^1.83.1"
  },
  "scripts": {
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --silence-deprecation=import --quiet-deps",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "bun run build:css:compile && bun run build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"bun run build:css\""
  },
  "browserslist": [
    "defaults"
  ]
}

Jan 13 '25 04:01 konung

Is there any plans to rewrite the module structure of bootstrap?)

Jan 23 '25 18:01 dilame

Module support for sure is coming in v6 with #41236, but I'm working with @julien-deramond to see if we can get it done sooner as well. It'd be a mid-version breaking change no matter how you look at it, so TBD.

Feb 27 '25 17:02 mdo

Since we’re collecting ways to silence warnings, this is for an angular project (tested in v19):

// angular.json
{
  "projects": {
    "${name}": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "sass": {
                "silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]
              }
            }
          }
        }
      }
    }
  }
}

Mar 11 '25 09:03 mwaibel-go

Since we’re collecting ways to silence warnings, this is for an angular project (tested in v19):

// angular.json
{
  "projects": {
    "${name}": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "sass": {
                "silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]
              }
            }
          }
        }
      }
    }
  }
}

somehow the people have forgot that there are library project also in angular, where they may need similar setting. this config works only for the application project.

Mar 27 '25 13:03 anantanandgupta

Since we’re collecting ways to silence warnings, this is for an angular project (tested in v19):
// angular.json
{
  "projects": {
    "${name}": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "sass": {
                "silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]
              }
            }
          }
        }
      }
    }
  }
}
somehow the people have forgot that there are library project also in angular, where they may need similar setting. this config works only for the application project.

for now I have added the below in my package.json to downgrade the sass version.

  "resolutions": {
    "sass": "1.77.6"
  },

this will force the npm / yarn to resolve to above version in case any version of sass is required by the dependency manager. Hope this will help a few. i will not require to silence the warning and it should work on all sort of projects in angular. tested with angular v19.2.

Mar 27 '25 13:03 anantanandgupta

Module support for sure is coming in v6 with #41236, but I'm working with @julien-deramond to see if we can get it done sooner as well. It'd be a mid-version breaking change no matter how you look at it, so TBD.

@mdo is there any news regarding getting it sooner? I'm waiting for this every night before falling asleep

Apr 28 '25 18:04 dilame

could someone kindly elaborate on a rough estimate? or what is the status? I honestly also do not understand how this is not a priority - open source or not.

May 13 '25 05:05 Berzerk3000

I think it is a priority, the switch to Astro was a big blocker, see https://github.com/orgs/twbs/discussions/41370

May 13 '25 07:05 MaxLardenois

@MaxLardenois thanks for linking that discussion, that clears up pretty much all the questions I had about this deprecation and the timeframes and their relation to Bootstrap versions. It'll be great to see this venerable project able to move away from SASS globals.

Jun 04 '25 21:06 VanessaPhippsCfa

One more approach for Angular @angular-builders/custom-webpack:browser (placed in webpack.custom.js) (app based on jHipster) :

const scssRule = config.module.rules.find(x => x.test && x.test.toString().includes('scss'));

  if (scssRule?.rules) {
    const uses = scssRule.rules.flatMap(r => r.use || r.oneOf?.flatMap(o => o.use) || []);

    const loaderOptions = uses.filter(u => u.loader && u.loader.includes('sass-loader')).map(u => u.options);

    loaderOptions.forEach(options => {
      const originalSassOptions = options.sassOptions;

      options.sassOptions = loader => {
        const base = typeof originalSassOptions === 'function' ? originalSassOptions(loader) : originalSassOptions || {};

        return {
          ...base,
          quietDeps: true,
          silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import'],
        };
      };
    });
  }

Jun 18 '25 07:06 pawprosk

For Ruby on Rails 8.0.2, Bootstrap 5.3.5 (gem), and dartsass-rails 0.5.1 (gem) the following silenced the warnings for me:

config/initializers/dartsass.rb:

Rails.application.config.dartsass.build_options |= ["--silence-deprecation=import,global-builtin,color-functions"]

Jun 21 '25 01:06 xander-doom

If anyone is coming from the NX world and is on >nx@21 and Rspack where you are using the NxAppRspackPlugin,

please use this :

stylePreprocessorOptions: { sassOptions: { // To be removed with future updates to bootstrap silenceDeprecations: ["mixed-decls", "color-functions", "global-builtin", "import"], }, },

It is mentioned here: https://github.com/nrwl/nx/blob/master/packages/rspack/src/plugins/utils/models.ts

Jul 09 '25 14:07 p-viral