♻️ Migrate Sass @import to @use syntax

style/_button.scss

@@ -2,6 +2,7 @@
 // Copyright 2011-2019 The Bootstrap Authors
 // Copyright 2011-2019 Twitter, Inc.
 // Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+@use "colors" as *;
 
 .sd-btn {
   background-color: transparent;

style/_display.scss

@@ -1,3 +1,5 @@
+@use "spacing" as *;
+
 .sd-d-none {
   display: none !important;
 }

style/_grids.scss

@@ -4,6 +4,7 @@
 // Copyright 2011-2019 Twitter, Inc.
 // Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 @use 'sass:math';
+@use "spacing" as *;
 
 $gutter-widths: $spacings;
 

style/_variables.scss

@@ -1,3 +1,5 @@
+@use "colors" as *;
+
 :root {
   // semantic colors
   @each $color, $value in $semantic-colors {

style/index.scss

@@ -1,16 +1,16 @@
-@import './colors';
-@import './spacing';
-@import './sizing';
-@import './display';
-@import './text';
-@import './borders';
-@import './animations';
-@import './badge';
-@import './button';
-@import './icons';
-@import './cards';
-@import './grids';
-@import './dropdown';
-@import './tabs';
-@import './overrides';
-@import './variables'
+@use './colors' as *;
+@use './spacing' as *;
+@use './sizing' as *;
+@use './display' as *;
+@use './text' as *;
+@use './borders' as *;
+@use './animations' as *;
+@use './badge' as *;
+@use './button' as *;
+@use './icons' as *;
+@use './cards' as *;
+@use './grids' as *;
+@use './dropdown' as *;
+@use './tabs' as *;
+@use './overrides' as *;
+@use './variables' as *;