chore: Fix sass deprecation warning (#2005)

src/components/Core/DataCard.vue

@@ -12,18 +12,9 @@ const vueTorrentStore = useVueTorrentStore()
     <v-row data-testid="card-wrapper" :class="`text-select text-${color}`">
       <v-col data-testid="card-title" cols="7" class="text-subtitle-1">{{ title }}</v-col>
       <v-col cols="5" class="">
-        <span data-testid="card-value" class="text-subtitle-1 roboto">{{ formatDataValue(value, vueTorrentStore.useBinarySize) }}</span>
+        <span data-testid="card-value" class="text-subtitle-1 font-weight-bold">{{ formatDataValue(value, vueTorrentStore.useBinarySize) }}</span>
         <span data-testid="card-unit" class="font-weight-light text-caption ml-1 text-subtitle-1">{{ formatDataUnit(value, vueTorrentStore.useBinarySize) }}</span>
       </v-col>
     </v-row>
   </v-sheet>
 </template>
-
-<style scoped lang="scss">
-@import '@fontsource/roboto-mono';
-
-.roboto {
-  font-family: 'Roboto Mono', sans-serif !important;
-  font-weight: 600;
-}
-</style>

src/components/Core/SpeedCard.vue

@@ -19,7 +19,7 @@ const vueTorrentStore = useVueTorrentStore()
       </v-col>
       <v-col cols="8" class="d-flex flex-column align-center justify-center">
         <div>
-          <span :class="`text-subtitle-1 roboto text-select text-${color}`">
+          <span :class="`text-subtitle-1 font-weight-bold text-select text-${color}`">
             {{ formatSpeedValue(value, vueTorrentStore.useBitSpeed) }}
           </span>
         </div>
@@ -32,12 +32,3 @@ const vueTorrentStore = useVueTorrentStore()
     </v-row>
   </v-sheet>
 </template>
-
-<style scoped lang="scss">
-@import '@fontsource/roboto-mono';
-
-.roboto {
-  font-family: 'Roboto Mono', sans-serif !important;
-  font-weight: 600;
-}
-</style>

src/components/Core/StringCard.vue

@@ -7,17 +7,8 @@ defineProps<{ title: string; value: any; color: string }>()
     <v-row class="text-select">
       <v-col cols="7" :class="`text-subtitle-1 text-${color}`">{{ title }}</v-col>
       <v-col cols="5" :class="`text-${color}`">
-        <span class="text-subtitle-1 roboto">{{ value }}</span>
+        <span class="text-subtitle-1 font-weight-bold">{{ value }}</span>
       </v-col>
     </v-row>
   </v-sheet>
 </template>
-
-<style scoped lang="scss">
-@import '@fontsource/roboto-mono';
-
-.roboto {
-  font-family: 'Roboto Mono', sans-serif !important;
-  font-weight: 600;
-}
-</style>

vite.config.ts

@@ -27,6 +27,13 @@ export default defineConfig(({ mode }) => {
         }
       }
     },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: "modern-compiler"
+        }
+      }
+    },
     define: {
       'import.meta.env.VITE_PACKAGE_VERSION': JSON.stringify(process.env.npm_package_version),
       'process.env': {}