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"};

src/components/Cookiebar/CookieBar.module.scss

@@ -1,4 +1,4 @@
-@import "../../assets/scss/variables";
+@use "../../assets/scss/variables" as *;
 
 $shadow: 0px -1px 5px rgba(50, 50, 50, 0.75);
 

src/components/Feed/Feed.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .feed {
   .item {

src/components/Layout/Layout.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .layout {
   lost-center: $layout-width;

src/components/Page/Page.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .page {
   @include margin-bottom(2);

src/components/Pagination/Pagination.module.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .pagination {
   display: flex;

src/components/Post/Author/Author.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .author {
   border-top: 1px solid $color-gray-border;

src/components/Post/Content/Content.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .content {
   @include margin-auto();

src/components/Post/Meta/Meta.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .meta {
   .date {

src/components/Post/Post.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .post {
 

src/components/Post/Tags/Tags.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .tags {
   @include margin-bottom(0.5);

src/components/PostHeader/PostHeader.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .header {
   align-items: baseline;

src/components/Sidebar/Author/Author.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .author {
   .photo {

src/components/Sidebar/Contacts/Contacts.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .contacts {
   @include margin-bottom(1);

src/components/Sidebar/Copyright/Copyright.module.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .copyright {
   color: $color-gray;

src/components/Sidebar/Menu/Menu.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .menu {
   .list {

src/components/Sidebar/Sidebar.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .sidebar {
   width: 100%;