chore(scss): rm deprecated @import

Author: haxgun

frontend/src/assets/style.scss

@@ -1,10 +1,10 @@
-@import 'variables';
+@use 'variables';
 
 :root {
-  background: $background-color;
-  color: $white;
+  background: variables.$background-color;
+  color: variables.$white;
   font-size: 16px;
-  font-family: $font-family_1;
+  font-family: variables.$font-family_1;
   font-synthesis: none;
   font-feature-settings: normal;
   font-variation-settings: normal;
@@ -37,7 +37,7 @@ main {
       gap: 1.8rem;
 
       .btn {
-        $btn-text-color: $white;
+        $btn-text-color: variables.$white;
         align-items: center;
         background: #fff;
         border: none;

frontend/src/assets/variables.scss

@@ -1,5 +1,5 @@
+@use 'normalize.css';
 @import 'https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Russo+One&display=swap';
-@import 'normalize.css';
 
 $font-family_1:
   Inter,

frontend/vite.config.js

@@ -10,7 +10,8 @@ export default defineConfig({
   css :{
     preprocessorOptions : {
       scss: {
-        api: "modern",
+        api: "modern-compiler",
+        silenceDeprecations: ["legacy-js-api"]
       }
     }
   },