Use SASS module system

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

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>

src/components/messages/RoomPowerLevelsChanged.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/RoomTopicChanged.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/SeenBy.vue

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

src/components/messages/channel/MessageOperationsChannel.vue

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

src/components/messages/channel/QuickReactionsChannel.vue

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

src/components/messages/channel/SwipeableThumbnailsView.vue

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

src/components/messages/export/MessageIncomingAudioExport.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/export/MessageIncomingFileExport.vue

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

src/components/messages/export/MessageIncomingImageExport.vue

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

src/components/messages/export/MessageIncomingThreadExport.vue

@@ -49,7 +49,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/export/MessageIncomingVideoExport.vue

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

src/components/messages/export/MessageOutgoingAudioExport.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/export/MessageOutgoingFileExport.vue

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

src/components/messages/export/MessageOutgoingImageExport.vue

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

src/components/messages/export/MessageOutgoingThreadExport.vue

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