restruct: updated scss @import rules to @use; package upgrade

src/components/tabs/StockGeneratorTab.vue

@@ -227,16 +227,10 @@ export default defineComponent({
 
           return acc;
         },
-        [] as {
-          constructionType: string;
-          carPool: { carWagon: ICarWagon; cargo?: ICargo }[];
-        }[]
+        [] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]
       );
 
-      let bestGeneration: { stockList: IStock[]; value: number } = {
-        stockList: [],
-        value: 0,
-      };
+      let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };
 
       for (let i = 0; i < 10; i++) {
         this.store.stockList.splice(
@@ -324,8 +318,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/global.scss';
-@import '../../styles/tab.scss';
+@use '@/styles/tab';
 
 h2 {
   margin-top: 0;
@@ -346,7 +339,7 @@ h2 {
     text-transform: uppercase;
     font-weight: bold;
 
-    background-color: $secondaryColor;
+    background-color: global.$secondaryColor;
 
     &[data-excluded='true'] {
       background-color: gray;
@@ -360,7 +353,7 @@ h2 {
       padding: 5px;
 
       transform: translate(-8px, -50%);
-      background-color: $bgColor;
+      background-color: global.$bgColor;
       color: white;
     }
   }
@@ -401,7 +394,7 @@ h2 {
 }
 
 .generator_warning {
-  background-color: $accentColor;
+  background-color: global.$accentColor;
   padding: 0.5em;
   text-align: justify;
   font-weight: bold;