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',
+            },
+        },
+    },
 })