Use SASS module system

Get rid of all the SASS warnings/errors when building.

src/App.vue

@@ -226,8 +226,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'vuetify/settings';
-@import '@/assets/css/variables';
+@use '@/assets/css/variables' as *;
+@use "vuetify/settings" as *;
+@use "sass:map";
 
 .copyright {
   font-size: 10px;
@@ -238,7 +239,7 @@ export default {
 }
 
 .main {
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map.get($display-breakpoints, 'lg-and-up')} {
     margin: 0 auto;
     width: $main-desktop-width;
   }

src/assets/css/_mixins.scss

@@ -1 +0,0 @@
-// Sass Mixins

src/assets/css/_utilities.scss

@@ -1,3 +1,5 @@
+@use "@/assets/css/variables" as *;
+
 .cursor-pointer {
     cursor: pointer !important;
 }

src/assets/css/_variables.scss

@@ -1,3 +1,5 @@
+@forward "vuetify/settings";
+
 $font-family: "Poppins";
 $background: #ffffff;
 $app-background: #f6f6f6;

src/assets/css/channel.scss

@@ -1,3 +1,5 @@
+@use "@/assets/css/variables" as *;
+
 .chat-root.channel {
   background-color: #f2f2f2;
   .chat-content {
@@ -111,6 +113,7 @@
       flex: 0 0 100%;
       margin: 24px 7px 0 7px;
       padding: 0 8px 16px 8px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       .emoji {
         font-size: 12 * $chat-text-size;
         font-weight: 500;
@@ -120,7 +123,6 @@
           height: 21px;
         }
       }
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     }
 
     /* Make all images 'cover' */

src/assets/css/chat.scss

@@ -1,8 +1,11 @@
-@import "vuetify/settings";
-@import "@/assets/css/main.scss";
-@import "@/assets/css/vendors/v-emoji-picker";
-@import "@/assets/css/filedrop.scss";
-@import "@/assets/css/channel.scss";
+@forward "@/assets/css/variables";
+@use "vuetify/settings" as *;
+@use "@/assets/css/variables" as *;
+@use "@/assets/css/main.scss" as *;
+@use "@/assets/css/vendors/v-emoji-picker" as *;
+@use "@/assets/css/filedrop.scss" as *;
+@use "@/assets/css/channel.scss" as *;
+@use "sass:map";
 
 $admin-bg: black;
 $admin-fg: white;
@@ -192,7 +195,7 @@ body {
     }
   }
 
-  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+  @media #{map.get($display-breakpoints, 'sm-and-down')} {
     position: fixed;
     z-index: 10;
   }
@@ -237,7 +240,7 @@ body {
       background: #4d4d4d;
     }
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
       //margin-top: 72px;
       margin-bottom: 70px;
     }
@@ -271,7 +274,7 @@ body {
       margin: 0px 20px;
       padding: 20px;
 
-      @media #{map-get($display-breakpoints, 'sm-and-down')} {
+      @media #{map.get($display-breakpoints, 'sm-and-down')} {
         margin: 0px 5px;
         padding: 15px;
       }
@@ -290,7 +293,7 @@ body {
       border: 1px solid #d4d4d4;
       border-radius: 32px;
       margin-bottom: 10px;
-      @media #{map-get($display-breakpoints, 'sm-and-down')} {
+      @media #{map.get($display-breakpoints, 'sm-and-down')} {
         margin-bottom: 12px;
       }
     }
@@ -304,7 +307,7 @@ body {
           fill: black;
         }
 
-        @media #{map-get($display-breakpoints, 'sm-and-down')} {
+        @media #{map.get($display-breakpoints, 'sm-and-down')} {
           display: none;
         }
       }
@@ -355,7 +358,7 @@ body {
       z-index: 40;
     }
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
       position: fixed;
       bottom: 0px;
       width: 100%;
@@ -459,7 +462,7 @@ body {
     position: relative;
     max-width: 70%;
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
       min-height: $min-touch-target;
     }
   }
@@ -553,7 +556,7 @@ body {
     position: relative;
     max-width: 70%;
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
       min-height: $min-touch-target;
     }
   }
@@ -997,7 +1000,7 @@ body {
   }
 
   .filled-button {
-    @media #{map-get($display-breakpoints, 'sm-and-up')} {
+    @media #{map.get($display-breakpoints, 'sm-and-up')} {
       min-width: 180px !important;
     }
   }

src/assets/css/components/_poll.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .poll-bubble {
   width: 70%;
   text-align: start;

src/assets/css/components/_voice-recorder.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .grow-enter-active,
 .grow-leave-active {
   transition-timing-function: ease-out;

src/assets/css/create.scss

@@ -1,4 +1,4 @@
-@import "@/assets/css/main.scss";
+@use "@/assets/css/main.scss" as *;
 
 
 .create-root {

src/assets/css/filedrop.scss

@@ -1,3 +1,5 @@
+@use "@/assets/css/variables" as *;
+
 $large-button-height: $min-touch-target;
 $small-button-height: 36px;
 

src/assets/css/join.scss

@@ -1,5 +1,6 @@
-@import "vuetify/settings";
-@import "@/assets/css/main.scss";
+@use "vuetify/settings" as *;
+@use "@/assets/css/main.scss" as *;
+@use "sass:map";
 
 .v-btn.btn-light {
     font-family: sans-serif;
@@ -37,7 +38,7 @@
         background: white;
         box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
 
-        @media #{map-get($display-breakpoints, 'sm-and-down')} {
+        @media #{map.get($display-breakpoints, 'sm-and-down')} {
             padding: 20px;
         }
     }
@@ -58,7 +59,7 @@
         .inactive {
             color: unset;
 
-            @media #{map-get($display-breakpoints, 'sm-and-up')} {
+            @media #{map.get($display-breakpoints, 'sm-and-up')} {
                 &:hover {
                     color: $very-very-purple;
                 }
@@ -152,10 +153,10 @@
         }
     }
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
         margin: 10px;
     }
-    @media #{map-get($display-breakpoints, 'md-and-up')} {
+    @media #{map.get($display-breakpoints, 'md-and-up')} {
         width: $main-desktop-width;
         margin: 0 auto;
     }

src/assets/css/login.scss

@@ -1,4 +1,5 @@
-@import "@/assets/css/main.scss";
+@use "@/assets/css/main.scss" as *;
+@use "@/assets/css/variables" as *;
 
 .login-root {
     background-color: $background;

src/assets/css/main.scss

@@ -1,6 +1,7 @@
-@import './variables';
-@import './utilities';
-@import './mixins';
+@forward 'variables';
+@forward 'utilities';
+@use 'variables' as *;
+@use 'utilities' as *;
 
 @font-face {
     font-family: "Inter";

src/assets/css/typography.scss

@@ -1,4 +1,4 @@
-@import "@/assets/css/main.scss";
+@use "@/assets/css/main.scss" as *;
 
 .h3-bold {
   font-family: "Poppins";

src/assets/css/vendors/_v-emoji-picker.scss

@@ -1,3 +1,6 @@
+@use "vuetify/settings" as *;
+@use "sass:map";
+
 .v3-emoji-picker {
     width: 100%;
     background-color: #ffffff;
@@ -7,11 +10,11 @@
     flex: 1 1 100%;
 
     .v3-emojis button {
-        @media #{map-get($display-breakpoints, 'sm')} {
+        @media #{map.get($display-breakpoints, 'sm')} {
             flex-basis: 10% !important;
             max-width: 10% !important;
         }
-        @media #{map-get($display-breakpoints, 'md-and-up')} {
+        @media #{map.get($display-breakpoints, 'md-and-up')} {
             flex-basis: 6.25% !important;
             max-width: 6.25% !important;
         }

src/components/ActionRow.vue

@@ -39,5 +39,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "vuetify/settings";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/AudioLayout.vue

@@ -445,5 +445,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/AuthedImage.vue

@@ -65,5 +65,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/BottomSheet.vue

@@ -161,8 +161,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'vuetify/settings';
-@import '@/assets/css/variables';
+@use 'vuetify/settings' as *;
+@use '@/assets/css/variables' as *;
+@use "sass:map";
+
 .sheetContent {
   position:absolute;
   top:20px;left:0;
@@ -223,7 +225,7 @@ export default {
     z-index: 1;
   }
 
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map.get($display-breakpoints, 'lg-and-up')} {
     margin: 0 auto;
     width: $dialog-desktop-width;
   }
@@ -236,7 +238,7 @@ export default {
 }
 
 .bottom-sheet-content[data-state="small"] {
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map.get($display-breakpoints, 'lg-and-up')} {
     top: 100px !important;
   }
 }

src/components/Chat.vue

@@ -2139,7 +2139,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 .heart-wrapper {
   position: fixed;
   z-index: -1;

src/components/ChatHeader.vue

@@ -241,7 +241,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .popup-open {
   position: relative;

src/components/ChatHeaderPrivate.vue

@@ -97,7 +97,7 @@ export default {
 
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .popup-open {
   position: relative;

src/components/Create.vue

@@ -62,8 +62,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/typography.scss";
-@import "@/assets/css/create.scss";
+@use "@/assets/css/typography.scss";
+@use "@/assets/css/create.scss";
+@use "@/assets/css/variables" as *;
 
 .create-title {
   margin-bottom: 24 * $chat-text-size;

src/components/CreateChannel.vue

@@ -182,6 +182,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/typography.scss";
-@import "@/assets/css/create.scss";
+@use "@/assets/css/typography.scss";
+@use "@/assets/css/create.scss";
 </style>

src/components/CreateFileDrop.vue

@@ -190,6 +190,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/typography.scss";
-@import "@/assets/css/create.scss";
+@use "@/assets/css/typography.scss";
+@use "@/assets/css/create.scss";
 </style>

src/components/CreatePollDialog.vue

@@ -198,6 +198,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-@import "@/assets/css/components/poll.scss";
+@use "@/assets/css/chat.scss" as *;
+@use "@/assets/css/components/poll.scss";
 </style>

src/components/CreateRoom.vue

@@ -394,7 +394,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/create.scss";
+@use "@/assets/css/create.scss";
 
 .avatar-select-control .v-select__selection {
   flex-basis: 100%;

src/components/GetLink.vue

@@ -248,6 +248,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/typography.scss";
-@import "@/assets/css/create.scss";
+@use "@/assets/css/typography.scss";
+@use "@/assets/css/create.scss";
 </style>

src/components/InputControl.vue

@@ -65,7 +65,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .input-field {
   width: 100%;

src/components/InteractiveAuth.vue

@@ -349,5 +349,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/Invite.vue

@@ -167,7 +167,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "@/assets/css/chat.scss";
+  @use "@/assets/css/chat.scss" as *;
   .invite {
     .chip-group-wrapper {
       min-height: 100px;

src/components/Join.vue

@@ -474,7 +474,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/join.scss";
+@use "@/assets/css/join.scss";
 
 .avatar-select-control .v-select__selection {
   flex-basis: 100%;

src/components/LeaveRoomDialog.vue

@@ -114,5 +114,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/Login.vue

@@ -269,5 +269,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/login.scss";
+@use "@/assets/css/login.scss";
 </style>

src/components/MessageOperationsBottomSheet.vue

@@ -70,7 +70,10 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
+@use "@/assets/css/variables" as *;
+@use "vuetify/settings" as *;
+@use "sass:map";
 
 /* Default implementation only dims background when fully open,
  so we use our own flag (data-closed) here to that we can
@@ -101,7 +104,7 @@ export default {
       right: 0;
       background-color: rgba(0, 0, 0, 0.15);
 
-      @media #{map-get($display-breakpoints, 'sm-and-down')} {
+      @media #{map.get($display-breakpoints, 'sm-and-down')} {
         z-index: 10;
       }
 
@@ -119,7 +122,7 @@ export default {
       left: 50%;
       transform: translate(-50%, 0);
 
-      @media #{map-get($display-breakpoints, 'lg-and-up')} {
+      @media #{map.get($display-breakpoints, 'lg-and-up')} {
         width: $dialog-desktop-width;
       }
     }

src/components/MessageRetentionDialog.vue

@@ -94,7 +94,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
+@use "@/assets/css/variables" as *;
 
 .v-radio .other {
   display: flex;

src/components/MoreLessControl.vue

@@ -57,5 +57,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/MoreMenuPopup.vue

@@ -83,8 +83,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-@import 'vuetify/settings';
+@use "@/assets/css/chat.scss" as *;
+@use "vuetify/settings" as *;
+@use "sass:map";
 
 .popup-wrapper {
   width: fit-content;
@@ -150,11 +151,11 @@ export default {
   //border-radius: 40px;
   width: 95%;
 
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map.get($display-breakpoints, 'sm-and-up')} {
     width: 70%;
   }
 
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map.get($display-breakpoints, 'lg-and-up')} {
     overflow: unset;
     width: $main-desktop-width;
     ;

src/components/NoHistoryRoomWelcomeHeader.vue

@@ -12,7 +12,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 .shield {
   margin-bottom: 12px;  
 }

src/components/Profile.vue

@@ -428,5 +428,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/ProfileInfoPopup.vue

@@ -119,8 +119,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-@import 'vuetify/settings';
+@use "@/assets/css/chat.scss" as *;
+@use "vuetify/settings" as *;
+@use "sass:map";
 
 .profile-info-popup {
   font-family: "Inter", sans-serif !important;
@@ -212,11 +213,11 @@ export default {
     font-size: 10 * $chat-text-size !important;
   }
 
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map.get($display-breakpoints, 'sm-and-up')} {
     width: 70%;
   }
 
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map.get($display-breakpoints, 'lg-and-up')} {
     overflow: unset;
     width: $main-desktop-width;
     position: absolute;

src/components/PurgeRoomDialog.vue

@@ -171,5 +171,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/QRCodePopup.vue

@@ -106,5 +106,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/QuoteView.vue

@@ -154,7 +154,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "@/assets/css/chat.scss";
+  @use "@/assets/css/chat.scss" as *;
 
   .author {
     font-size: 80%;

src/components/ReportRoomDialog.vue

@@ -71,5 +71,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/RoomDialogBase.vue

@@ -39,5 +39,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/RoomInfo.vue

@@ -567,6 +567,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 </style>

src/components/RoomInfoBottomSheet.vue

@@ -46,5 +46,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/RoomList.vue

@@ -217,7 +217,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
 
 <style lang="scss" scoped>

src/components/RoundedDialog.vue

@@ -10,5 +10,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/SelectLanguageDialog.vue

@@ -50,5 +50,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/StickerPickerBottomSheet.vue

@@ -59,7 +59,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "@/assets/css/chat.scss";
+  @use "@/assets/css/chat.scss" as *;
 </style>
 
 <style lang="scss">

src/components/UserProfileDialog.vue

@@ -235,5 +235,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/VoiceRecorder.vue

@@ -553,6 +553,6 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "@/assets/css/chat.scss";
-  @import "@/assets/css/components/voice-recorder.scss";
+  @use "@/assets/css/chat.scss" as *;
+  @use "@/assets/css/components/voice-recorder.scss";
 </style>

src/components/VoiceRecorderLock.vue

@@ -24,5 +24,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style> 

src/components/YouAre.vue

@@ -54,5 +54,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/create/CreateRoomAvatar.vue

@@ -54,7 +54,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/create.scss";
+@use "@/assets/css/create.scss";
+@use "@/assets/css/variables" as *;
 
 .create-room-avatar {
     width: 72px;

src/components/file_mode/FileDropLayout.vue

@@ -214,5 +214,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/file_mode/GalleryItemsView.vue

@@ -106,7 +106,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .chat-header {
   position: relative !important;

src/components/file_mode/ThumbnailView.vue

@@ -89,7 +89,7 @@ export default {
 
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .thumbnail-item {
     width: 100%;

src/components/messages/AudioPlayer.vue

@@ -85,5 +85,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/AudioWaveformView.vue

@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .waveform svg {
     width: 100%;

src/components/messages/ContactBanned.vue

@@ -21,5 +21,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/ContactChanged.vue

@@ -40,5 +40,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/ContactInvited.vue

@@ -14,5 +14,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/ContactJoin.vue

@@ -14,5 +14,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/ContactKicked.vue

@@ -21,5 +21,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/ContactLeave.vue

@@ -19,5 +19,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/DebugEvent.vue

@@ -11,5 +11,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageIncoming.vue

@@ -52,5 +52,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageIncomingAudio.vue

@@ -17,5 +17,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageIncomingFile.vue

@@ -30,5 +30,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageIncomingImage.vue

@@ -82,5 +82,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageIncomingPoll.vue

@@ -93,6 +93,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-@import "@/assets/css/components/poll.scss";
+@use "@/assets/css/chat.scss" as *;
+@use "@/assets/css/components/poll.scss";
 </style>

src/components/messages/MessageIncomingSticker.vue

@@ -34,5 +34,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageIncomingText.vue

@@ -39,5 +39,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageIncomingThread.vue

@@ -137,7 +137,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
 
 <style lang="scss" scoped>

src/components/messages/MessageIncomingVideo.vue

@@ -36,5 +36,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageOperations.vue

@@ -72,5 +72,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageOperationsPicker.vue

@@ -47,5 +47,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageOutgoing.vue

@@ -57,5 +57,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageOutgoingAudio.vue

@@ -17,5 +17,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageOutgoingFile.vue

@@ -30,5 +30,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageOutgoingImage.vue

@@ -81,5 +81,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageOutgoingPoll.vue

@@ -93,6 +93,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-@import "@/assets/css/components/poll.scss";
+@use "@/assets/css/chat.scss" as *;
+@use "@/assets/css/components/poll.scss";
 </style>

src/components/messages/MessageOutgoingSticker.vue

@@ -33,5 +33,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageOutgoingText.vue

@@ -35,5 +35,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/MessageOutgoingThread.vue

@@ -134,7 +134,7 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
 
 <style lang="scss" scoped>

src/components/messages/MessageOutgoingVideo.vue

@@ -36,5 +36,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/QuickReactions.vue

@@ -161,5 +161,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/ReadMarker.vue

@@ -13,5 +13,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/RoomAliased.vue

@@ -13,5 +13,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/RoomAvatarChanged.vue

@@ -14,5 +14,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/RoomCreated.vue

@@ -13,5 +13,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/RoomDeletionNotice.vue

@@ -19,5 +19,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/RoomEncrypted.vue

@@ -13,5 +13,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/RoomGuestAccessChanged.vue

@@ -30,5 +30,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/RoomHistoryVisibility.vue

@@ -30,5 +30,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/RoomJoinRules.vue

@@ -26,5 +26,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>

src/components/messages/RoomNameChanged.vue

@@ -14,5 +14,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>