Use SASS module system

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

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>

src/components/messages/export/MessageOutgoingVideoExport.vue

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