diff --git a/src/layouts/LeftMode.vue b/src/layouts/LeftMode.vue
index e5ec2ff..aad7e1a 100644
--- a/src/layouts/LeftMode.vue
+++ b/src/layouts/LeftMode.vue
@@ -51,7 +51,7 @@ const handleClickOutside = () => {
 </script>
 
 <style lang="scss" scoped>
-@use "@/styles/mixins";
+@import "@/styles/mixins.scss";
 $transition-time: 0.35s;
 
 .app-wrapper {
diff --git a/src/layouts/TopMode.vue b/src/layouts/TopMode.vue
index 1ed1033..8552182 100644
--- a/src/layouts/TopMode.vue
+++ b/src/layouts/TopMode.vue
@@ -26,7 +26,7 @@ const { showTagsView, showLogo } = storeToRefs(settingsStore);
 </script>
 
 <style lang="scss" scoped>
-@use "@/styles/mixins";
+@import "@/styles/mixins.scss";
 $transition-time: 0.35s;
 
 .app-wrapper {
diff --git a/src/layouts/components/AppMain.vue b/src/layouts/components/AppMain.vue
index cc27d26..c96a3e0 100644
--- a/src/layouts/components/AppMain.vue
+++ b/src/layouts/components/AppMain.vue
@@ -33,7 +33,7 @@ const settingsStore = useSettingsStore();
 </script>
 
 <style lang="scss" scoped>
-@use "@/styles/mixins";
+@import "@/styles/mixins.scss";
 
 .app-main {
   width: 100%;
diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
index bb97701..2597030 100644
--- a/src/layouts/components/Settings/index.vue
+++ b/src/layouts/components/Settings/index.vue
@@ -74,7 +74,7 @@ watchEffect(() => {
 </script>
 
 <style lang="scss" scoped>
-@use "@/styles/mixins";
+@import "@/styles/mixins.scss";
 
 .setting-container {
   padding: 20px;