diff --git a/core/src/components/badge/badge.ios.scss b/core/src/components/badge/badge.ios.scss
index 973acd9d6d..66efc75d7b 100644
--- a/core/src/components/badge/badge.ios.scss
+++ b/core/src/components/badge/badge.ios.scss
@@ -1,9 +1,9 @@
-@import "./badge";
-@import "./badge.ios.vars";
+@use "badge" as badge2;
+@use "badge.ios.vars";
 
 // iOS Badge
 // --------------------------------------------------
 
 :host {
-  @include border-radius($badge-ios-border-radius);
+  @include border-radius(badge.$badge-ios-border-radius);
 }
diff --git a/core/src/components/badge/badge.ios.vars.scss b/core/src/components/badge/badge.ios.vars.scss
index 8723dfcfde..23325aa245 100644
--- a/core/src/components/badge/badge.ios.vars.scss
+++ b/core/src/components/badge/badge.ios.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes-migrated/ionic.globals.ios";
+@use "../../themes-migrated/ionic.globals.ios";
 
 // iOS Badge
 // --------------------------------------------------
diff --git a/core/src/components/badge/badge.md.scss b/core/src/components/badge/badge.md.scss
index d1038913dc..37f2fd010e 100644
--- a/core/src/components/badge/badge.md.scss
+++ b/core/src/components/badge/badge.md.scss
@@ -1,5 +1,5 @@
-@import "./badge";
-@import "./badge.md.vars";
+@use "badge" as badge2;
+@use "badge.md.vars";
 
 // Material Design Badge
 // --------------------------------------------------
@@ -10,5 +10,5 @@
   --padding-bottom: 4px;
   --padding-start: 4px;
 
-  @include border-radius($badge-md-border-radius);
+  @include border-radius(badge.$badge-md-border-radius);
 }
diff --git a/core/src/components/badge/badge.md.vars.scss b/core/src/components/badge/badge.md.vars.scss
index c6a69e1ae2..f084a3bd9a 100644
--- a/core/src/components/badge/badge.md.vars.scss
+++ b/core/src/components/badge/badge.md.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes-migrated/ionic.globals.md";
+@use "../../themes-migrated/ionic.globals.md";
 
 // Material Design Badge
 // --------------------------------------------------
diff --git a/core/src/components/badge/badge.scss b/core/src/components/badge/badge.scss
index 22252d5523..5ecc908f7b 100644
--- a/core/src/components/badge/badge.scss
+++ b/core/src/components/badge/badge.scss
@@ -1,4 +1,5 @@
-@import "./badge.vars";
+@use "badge.vars";
+@use "../../themes-migrated/ionic.globals";
 
 // Badge
 // --------------------------------------------------
@@ -15,24 +16,24 @@
    */
   --background: #{ion-color(primary, base)};
   --color: #{ion-color(primary, contrast)};
-  --padding-top: #{$badge-padding-top};
-  --padding-end: #{$badge-padding-end};
-  --padding-bottom: #{$badge-padding-bottom};
-  --padding-start: #{$badge-padding-start};
+  --padding-top: #{badge.$badge-padding-top};
+  --padding-end: #{badge.$badge-padding-end};
+  --padding-bottom: #{badge.$badge-padding-bottom};
+  --padding-start: #{badge.$badge-padding-start};
 
   @include font-smoothing();
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
   display: inline-block;
 
-  min-width: $badge-min-width;
+  min-width: badge.$badge-min-width;
 
   background: var(--background);
   color: var(--color);
 
-  font-family: $font-family-base;
-  font-size: $badge-font-size;
-  font-weight: $badge-font-weight;
+  font-family: ionic.$font-family-base;
+  font-size: badge.$badge-font-size;
+  font-weight: badge.$badge-font-weight;
 
   line-height: 1;
 
diff --git a/core/src/components/badge/badge.vars.scss b/core/src/components/badge/badge.vars.scss
index bcd6c49a99..16a79379fc 100644
--- a/core/src/components/badge/badge.vars.scss
+++ b/core/src/components/badge/badge.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes-migrated/ionic.globals";
+@use "../../themes-migrated/ionic.globals";
 
 // Badge
 // --------------------------------------------------
diff --git a/core/src/themes-migrated/ionic.globals.ios.scss b/core/src/themes-migrated/ionic.globals.ios.scss
index d9aca20c4f..bcca797490 100644
--- a/core/src/themes-migrated/ionic.globals.ios.scss
+++ b/core/src/themes-migrated/ionic.globals.ios.scss
@@ -1,6 +1,6 @@
 
 // Global Core
-@import "./ionic.globals";
+@use "ionic.globals";
 
 // Global iOS
-@import "./ionic.theme.default.ios";
+@use "ionic.theme.default.ios" as ionic2;
diff --git a/core/src/themes-migrated/ionic.globals.md.scss b/core/src/themes-migrated/ionic.globals.md.scss
index 6c0d558d01..1b992d5eba 100644
--- a/core/src/themes-migrated/ionic.globals.md.scss
+++ b/core/src/themes-migrated/ionic.globals.md.scss
@@ -1,6 +1,6 @@
 
 // Core Globals
-@import "./ionic.globals";
+@use "ionic.globals";
 
 // Material Design Globals
-@import "./ionic.theme.default.md";
+@use "ionic.theme.default.md" as ionic2;