From c02a24ee94b2fab6c36f33afa142bed3bb0ac522 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:58:44 +0800
Subject: [PATCH] chore: compatible with new sass

---
 frontend/src/components/content/ContentLogPane.vue         | 2 +-
 frontend/src/components/content/ContentPane.vue            | 2 +-
 frontend/src/components/content/ContentServerPane.vue      | 2 +-
 frontend/src/components/content_value/ContentMonitor.vue   | 2 +-
 frontend/src/components/content_value/ContentPubsub.vue    | 2 +-
 .../src/components/content_value/ContentServerStatus.vue   | 2 +-
 frontend/src/components/content_value/ContentSlog.vue      | 2 +-
 frontend/src/components/dialogs/DecoderDialog.vue          | 2 +-
 frontend/src/components/sidebar/BrowserPane.vue            | 4 ++--
 frontend/src/components/sidebar/BrowserTree.vue            | 2 +-
 frontend/src/components/sidebar/ConnectionTree.vue         | 2 +-
 frontend/vite.config.js                                    | 7 +++++++
 12 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/content/ContentLogPane.vue b/frontend/src/components/content/ContentLogPane.vue
index 77c6270..2f74061 100644
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@@ -168,5 +168,5 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 </style>
diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index 18773b2..2c6e3ff 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -212,7 +212,7 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 
 .content-container {
     //padding: 5px 5px 0;
diff --git a/frontend/src/components/content/ContentServerPane.vue b/frontend/src/components/content/ContentServerPane.vue
index 87e0e62..ccd13d1 100644
--- a/frontend/src/components/content/ContentServerPane.vue
+++ b/frontend/src/components/content/ContentServerPane.vue
@@ -22,7 +22,7 @@ const dialogStore = useDialogStore()
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 
 .content-container {
     justify-content: center;
diff --git a/frontend/src/components/content_value/ContentMonitor.vue b/frontend/src/components/content_value/ContentMonitor.vue
index 64832b6..e0c7225 100644
--- a/frontend/src/components/content_value/ContentMonitor.vue
+++ b/frontend/src/components/content_value/ContentMonitor.vue
@@ -181,7 +181,7 @@ const onCleanLog = () => {
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 
 .line-item {
     margin-bottom: 5px;
diff --git a/frontend/src/components/content_value/ContentPubsub.vue b/frontend/src/components/content_value/ContentPubsub.vue
index dcb334a..d6a5591 100644
--- a/frontend/src/components/content_value/ContentPubsub.vue
+++ b/frontend/src/components/content_value/ContentPubsub.vue
@@ -281,7 +281,7 @@ const onPublish = async () => {
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 
 .total-message {
     margin: 10px 0 0;
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index d72dbe6..7cfdf07 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -776,7 +776,7 @@ const clientTableColumns = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 
 .line-chart {
     display: flex;
diff --git a/frontend/src/components/content_value/ContentSlog.vue b/frontend/src/components/content_value/ContentSlog.vue
index ae49a95..02b3c69 100644
--- a/frontend/src/components/content_value/ContentSlog.vue
+++ b/frontend/src/components/content_value/ContentSlog.vue
@@ -222,5 +222,5 @@ const onListLimitChanged = (limit) => {
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 </style>
diff --git a/frontend/src/components/dialogs/DecoderDialog.vue b/frontend/src/components/dialogs/DecoderDialog.vue
index 3f7fa79..034b6d0 100644
--- a/frontend/src/components/dialogs/DecoderDialog.vue
+++ b/frontend/src/components/dialogs/DecoderDialog.vue
@@ -203,5 +203,5 @@ const onClose = () => {}
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 </style>
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index ad92735..1e3b681 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -458,7 +458,7 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/style';
+@use '@/styles/style' as style;
 
 :deep(.toggle-btn) {
     border-style: solid;
@@ -483,7 +483,7 @@ watch(
 }
 
 .nav-pane-bottom {
-    @include top-shadow(0.1);
+    @include style.top-shadow(0.1);
     color: v-bind('themeVars.iconColor');
     border-top: v-bind('themeVars.borderColor') 1px solid;
 }
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 53e1626..3291697 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -850,7 +850,7 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 
 .browser-tree-wrapper {
     height: 100%;
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index 2730ae4..5a5c22a 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -542,7 +542,7 @@ const onCancelOpen = () => {
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 
 .connection-tree-wrapper {
     height: 100%;
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index fc50389..ac5c9c1 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -29,4 +29,11 @@ export default defineConfig({
             wailsjs: rootPath + 'wailsjs',
         },
     },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern-compiler',
+            },
+        },
+    },
 })