chore: compatible with new sass

frontend/src/components/content/ContentLogPane.vue

@@ -168,5 +168,5 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 </style>

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;

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;

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;

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;

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;

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>

frontend/src/components/dialogs/DecoderDialog.vue

@@ -203,5 +203,5 @@ const onClose = () => {}
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/content';
+@use '@/styles/content';
 </style>

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;
 }

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%;

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%;

frontend/vite.config.js

@@ -29,4 +29,11 @@ export default defineConfig({
             wailsjs: rootPath + 'wailsjs',
         },
     },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern-compiler',
+            },
+        },
+    },
 })