diff --git a/.stylelintrc.json b/.stylelintrc.json
index c07d031f5..30fcc905c 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -5,6 +5,7 @@
 
   "rules": {
     "at-rule-no-unknown": null,
+    "at-rule-disallowed-list": ["import"],
     "scss/at-rule-no-unknown": true,
     "scss/dollar-variable-pattern": null,
     "scss/at-import-partial-extension": null,
diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss
index 05734e951..9c38c04ce 100644
--- a/docs-site/src/components/Examples/examples.scss
+++ b/docs-site/src/components/Examples/examples.scss
@@ -1,7 +1,9 @@
+@use "helpers";
+
 .examples__navigation {
   display: none;
 
-  @include breakpoint(640px) {
+  @include helpers.breakpoint(640px) {
     width: 200px;
     float: left;
     display: block;
@@ -76,7 +78,7 @@
     overflow-x: auto;
     overflow-y: hidden;
 
-    @include breakpoint(768px) {
+    @include helpers.breakpoint(768px) {
       width: 70%;
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
@@ -98,7 +100,7 @@
   }
   &__preview {
     padding: 20px;
-    @include breakpoint(768px) {
+    @include helpers.breakpoint(768px) {
       width: 30%;
     }
     @media (max-width: 768px) {
diff --git a/docs-site/src/components/Examples/breakpoint.scss b/docs-site/src/components/Examples/helpers.scss
similarity index 58%
rename from docs-site/src/components/Examples/breakpoint.scss
rename to docs-site/src/components/Examples/helpers.scss
index 8627020aa..b0c92df44 100644
--- a/docs-site/src/components/Examples/breakpoint.scss
+++ b/docs-site/src/components/Examples/helpers.scss
@@ -3,3 +3,8 @@
     @content;
   }
 }
+
+%container-styling {
+  max-width: 1100px;
+  margin: 0 auto;
+}
diff --git a/docs-site/src/components/Examples/hero.scss b/docs-site/src/components/Examples/hero.scss
index a642bc518..a9f34dd04 100644
--- a/docs-site/src/components/Examples/hero.scss
+++ b/docs-site/src/components/Examples/hero.scss
@@ -1,3 +1,5 @@
+@use "helpers" as *;
+
 .hero {
   color: #fff;
   background-color: #216ba5;
diff --git a/docs-site/src/components/Examples/style.scss b/docs-site/src/components/Examples/style.scss
index 695a00ef8..b8d64a02b 100644
--- a/docs-site/src/components/Examples/style.scss
+++ b/docs-site/src/components/Examples/style.scss
@@ -1,13 +1,8 @@
-@import "reset";
-@import "higlight";
-@import "breakpoint";
-@import "hero";
-@import "examples";
-
-%container-styling {
-  max-width: 1100px;
-  margin: 0 auto;
-}
+@use "reset";
+@use "higlight";
+@use "helpers";
+@use "examples";
+@use "hero";
 
 html,
 body {
@@ -88,7 +83,7 @@ strong {
 }
 
 .row {
-  @include breakpoint(768px) {
+  @include helpers.breakpoint(768px) {
     display: flex;
   }
 }
diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
index 7d92ebeab..471fab9c0 100644
--- a/src/stylesheets/datepicker.scss
+++ b/src/stylesheets/datepicker.scss
@@ -1,6 +1,6 @@
 @use "sass:color";
-@import "variables.scss";
-@import "mixins.scss";
+@use "variables" as *;
+@use "mixins" as *;
 
 .react-datepicker-wrapper {
   display: inline-block;
diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss
index 2fb5443ac..f9d02351c 100644
--- a/src/stylesheets/mixins.scss
+++ b/src/stylesheets/mixins.scss
@@ -1,5 +1,7 @@
+@use "variables";
+
 %navigation-chevron {
-  border-color: $datepicker__muted-color;
+  border-color: variables.$datepicker__muted-color;
   border-style: solid;
   border-width: 3px 3px 0 0;
   content: "";
@@ -11,7 +13,7 @@
 
   &--disabled,
   &--disabled:hover {
-    border-color: $datepicker__navigation-disabled-color;
+    border-color: variables.$datepicker__navigation-disabled-color;
     cursor: default;
   }
 }