fix: updated sass to use @use instead of @import

src/assets/scss/_base.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@import "base/generic";
+@use "base/generic";
 
 .showInPrintView {
   display: none;

src/assets/scss/_mixins.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@import "mixins/breakpoints";
-@import "mixins/line-height";
-@import "mixins/padding";
-@import "mixins/margin";
+@forward "mixins/breakpoints";
+@forward "mixins/line-height";
+@forward "mixins/padding";
+@forward "mixins/margin";

src/assets/scss/base/_generic.scss

@@ -1,5 +1,5 @@
-@import "../variables";
-@import "../mixins";
+@use "../variables" as *;
+@use "../mixins" as *;
 
 html {
   font-size: $typographic-root-font-size;

src/assets/scss/main.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
-@import "variables";
-@import "mixins";
-@import "base";
+@use "variables";
+@use "mixins";
+@use "base";

src/assets/scss/mixins/_breakpoints.scss

@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin breakpoint-xs {
   @content;

src/assets/scss/mixins/_line-height.scss

@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin line-height($number) {
   line-height: #{$number * $typographic-leading + "px"};

src/assets/scss/mixins/_margin.scss

@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin margin-auto($number: 0) {
   margin: #{$number * $typographic-leading + "px"} auto;

src/assets/scss/mixins/_padding.scss

@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin padding-left($number) {
   padding-left: #{$number * $typographic-leading + "px"};