diff --git a/src/App.scss b/src/App.scss
index 6fa3a95b7..fa02ad929 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,6 +1,6 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
-@import "./panel";
+@use "panel";
 
 :root {
   --status-margin: 0.75em;
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 57158abad..dfd197e56 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -95,6 +95,4 @@
 </template>
 
 <script src="./chat.js"></script>
-<style lang="scss">
-@import "./chat";
-</style>
+<style src="./chat.scss" lang="scss" />
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 0f9d5c5fa..236562df0 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -47,6 +47,4 @@
 
 <script src="./chat_list_item.js"></script>
 
-<style lang="scss">
-@import "./chat_list_item";
-</style>
+<style src="./chat_list_item.scss" lang="scss" />
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 0efdf7977..22e2e8eb8 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -98,7 +98,5 @@
 </template>
 
 <script src="./chat_message.js"></script>
-<style lang="scss">
-@import "./chat_message";
 
-</style>
+<style src="./chat_message.scss" lang="scss" />
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 673ba56b6..14b26efd6 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -47,6 +47,5 @@
 </template>
 
 <script src="./chat_new.js"></script>
-<style lang="scss">
-@import "./chat_new";
-</style>
+
+<style src="./chat_new.scss" lang="scss" />
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index b6eab3ef7..0cd3d95a4 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -63,8 +63,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../mixins";
-
 .checkbox {
   position: relative;
   display: inline-block;
diff --git a/src/components/emoji_reactions/emoji_reactions.scss b/src/components/emoji_reactions/emoji_reactions.scss
new file mode 100644
index 000000000..8ea45e1b4
--- /dev/null
+++ b/src/components/emoji_reactions/emoji_reactions.scss
@@ -0,0 +1,121 @@
+@use "../../mixins";
+
+.EmojiReactions {
+  display: flex;
+  margin-top: 0.25em;
+  flex-wrap: wrap;
+
+  --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
+
+  .emoji-reaction-container {
+    display: flex;
+    align-items: stretch;
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+
+    .emoji-reaction-popover {
+      padding: 0;
+
+      .emoji-reaction-count-button {
+        margin: 0;
+        height: 100%;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        box-sizing: border-box;
+        min-width: 2em;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+
+  .emoji-reaction {
+    padding-left: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin: 0;
+
+    .reaction-emoji {
+      width: var(--emoji-size);
+      height: var(--emoji-size);
+      margin-right: 0.25em;
+      line-height: var(--emoji-size);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      --_still_image-label-scale: 0.3;
+    }
+
+    .reaction-emoji-content {
+      max-width: 100%;
+      max-height: 100%;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
+      line-height: inherit;
+      overflow: hidden;
+      font-size: calc(var(--emoji-size) * 0.8);
+      margin: 0;
+
+      img {
+        object-fit: contain;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .svg-inline--fa {
+      color: var(--text);
+    }
+
+    &.-picked-reaction {
+      .svg-inline--fa {
+        color: var(--accent);
+      }
+    }
+
+    @include mixins.unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include mixins.focused-style {
+      .svg-inline--fa {
+        color: var(--accent);
+      }
+
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .emoji-reaction-expand {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+    margin-top: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 63adef5f9..ace8f82eb 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -70,126 +70,5 @@
 </template>
 
 <script src="./emoji_reactions.js"></script>
-<style lang="scss">
-@import "../../mixins";
 
-.EmojiReactions {
-  display: flex;
-  margin-top: 0.25em;
-  flex-wrap: wrap;
-
-  --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
-
-  .emoji-reaction-container {
-    display: flex;
-    align-items: stretch;
-    margin-top: 0.5em;
-    margin-right: 0.5em;
-
-    .emoji-reaction-popover {
-      padding: 0;
-
-      .emoji-reaction-count-button {
-        margin: 0;
-        height: 100%;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        box-sizing: border-box;
-        min-width: 2em;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-
-  .emoji-reaction {
-    padding-left: 0.5em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    margin: 0;
-
-    .reaction-emoji {
-      width: var(--emoji-size);
-      height: var(--emoji-size);
-      margin-right: 0.25em;
-      line-height: var(--emoji-size);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      --_still_image-label-scale: 0.3;
-    }
-
-    .reaction-emoji-content {
-      max-width: 100%;
-      max-height: 100%;
-      width: var(--emoji-size);
-      height: var(--emoji-size);
-      line-height: inherit;
-      overflow: hidden;
-      font-size: calc(var(--emoji-size) * 0.8);
-      margin: 0;
-
-      img {
-        object-fit: contain;
-      }
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    .svg-inline--fa {
-      color: var(--text);
-    }
-
-    &.-picked-reaction {
-      .svg-inline--fa {
-        color: var(--accent);
-      }
-    }
-
-    @include unfocused-style {
-      .focus-marker {
-        visibility: hidden;
-      }
-
-      .active-marker {
-        visibility: visible;
-      }
-    }
-
-    @include focused-style {
-      .svg-inline--fa {
-        color: var(--accent);
-      }
-
-      .focus-marker {
-        visibility: visible;
-      }
-
-      .active-marker {
-        visibility: hidden;
-      }
-    }
-  }
-
-  .emoji-reaction-expand {
-    padding: 0 0.5em;
-    margin-right: 0.5em;
-    margin-top: 0.5em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-</style>
+<style src="./emoji_reactions.scss" lang="scss" />
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index 2632fa087..55bacee27 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -238,6 +238,4 @@
 
 <script src="./mrf_transparency_panel.js"></script>
 
-<style lang="scss">
-@import "./mrf_transparency_panel";
-</style>
+<style src="./mrf_transparency_panel.scss" lang="scss"/>
diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
index bbd3f7af4..c0a9824df 100644
--- a/src/components/status_action_buttons/action_button.scss
+++ b/src/components/status_action_buttons/action_button.scss
@@ -1,4 +1,4 @@
-@import "../../mixins";
+@use "../../mixins";
 /* stylelint-disable declaration-no-important */
 
 .quick-action {
@@ -52,7 +52,7 @@
     grid-auto-columns: max-content;
     align-items: center;
 
-    @include unfocused-style {
+    @include mixins.unfocused-style {
       .focus-marker {
         visibility: hidden;
       }
@@ -62,7 +62,7 @@
       }
     }
 
-    @include focused-style {
+    @include mixins.focused-style {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
index 018ff34d9..78fd7c33d 100644
--- a/src/components/status_action_buttons/status_action_buttons.scss
+++ b/src/components/status_action_buttons/status_action_buttons.scss
@@ -1,4 +1,4 @@
-@import "../../mixins";
+@use "../../mixins";
 
 .StatusActionButtons {
   .quick-action-buttons {