🛶 refactor(scss): use @use rule instead of @import

package.json

@@ -46,7 +46,7 @@
     "@fortawesome/vue-fontawesome": "~3.0.0-5",
     "axios": "0.26.1",
     "echarts": "^5.3.1",
-    "element-plus": "2.0.5",
+    "element-plus": "2.1.0",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",

src/App.vue

@@ -72,6 +72,6 @@ export default {
 }
 </script>
 
-<style lang="sass">
-@import '@/styles/index.scss'
+<style lang="scss">
+@use '@/styles/index';
 </style>

src/components/Navigation/Avatar.vue

@@ -73,7 +73,7 @@ export default defineComponent({
   user-select: none;
   img {
     width: 24px;
-    border: 1px solid $--color-primary;
+    border: 1px solid $color-primary;
     border-radius: 50%;
   }
 }

src/components/SearchSelect/index.vue

@@ -195,6 +195,6 @@ export default defineComponent({
   }
 }
 .search-select-highlight {
-  color: $--color-primary;
+  color: $color-primary;
 }
 </style>

src/locales/Translations.vue

@@ -89,8 +89,8 @@ export default defineComponent({
   .icon-outer {
     display: flex;
     align-items: center;
-    &:hover {
-      color: $--color-primary;
+    &:hover > * {
+      color: $color-success;
     }
   }
   .custom-dropdown-item {

src/modules/Project/components/ProjectItem.vue

@@ -170,7 +170,7 @@ export default defineComponent({
       margin-right: 16px;
       & > svg {
         font-size: 20px;
-        color: $--color-primary
+        color: $color-primary
       }
     }
     .project-item__name-desc {
@@ -187,13 +187,13 @@ export default defineComponent({
         }
         .corpname-notes {
           font-size: 15px;
-          color: $--color-info;
+          color: $color-info;
           cursor: pointer;
         }
       }
       .project-item__name-desc__fullname {
         font-size: 12px;
-        color: $--color-info;
+        color: $color-info;
       }
     }
   }
@@ -219,10 +219,10 @@ export default defineComponent({
     }
 
     &.active {
-      color: $--color-primary;
+      color: $color-primary;
     }
     &.loading {
-      color: $--color-primary;
+      color: $color-primary;
     }
     &:hover {
       color: #6b9eff;

src/modules/Result/pages/overview.vue

@@ -55,7 +55,7 @@ export default defineComponent({
     grid-column-start: span 2;
   }
   .fitting-operate {
-    color: $--color-primary;
+    color: $color-primary;
     cursor: pointer;
   }
 }

src/styles/element-status.scss

@@ -1,3 +1,5 @@
+@use '@/styles/element-variables.scss' as *;
+
 .el-form-item__label {
   color: #606266;
 }
@@ -24,16 +26,16 @@
 }
 
 .el-message .el-message-icon--success {
-  color: $--color-success;
+  color: $color-success;
 }
 .el-message .el-message-icon--warning {
-  color: $--color-warning;
+  color: $color-warning;
 }
 .el-message .el-message-icon--info {
-  color: $--color-primary;
+  color: $color-primary;
 }
 .el-message .el-message-icon--error {
-  color: $--color-danger;
+  color: $color-danger;
 }
 
 .el-button {

src/styles/element-variables.scss

@@ -4,33 +4,33 @@
 // otherwise it will affect the packaging speed.
 
 /* theme color */
-$--color-primary: #4686FF;
-$--color-success: #52C41A;
-$--color-warning: #FAAD14;
-$--color-danger: #FA5555;
-$--color-info: #909399;
+$color-primary: #4686FF;
+$color-success: #52C41A;
+$color-warning: #FAAD14;
+$color-danger: #FA5555;
+$color-info: #909399;
 
+$--colors: (
+  "primary": (
+    "base": $color-primary,
+  ),
+  "success": (
+    "base":  $color-success,
+  ),
+  "warning": (
+    "base":  $color-warning,
+  ),
+  "danger": (
+    "base":  $color-danger,
+  ),
+  "info": (
+    "base":  $color-info,
+  )
+);
 
 // 按需导入，重写覆盖自己所需样式
 @forward "element-plus/theme-chalk/src/common/var.scss" with (
-  $colors: (
-    "primary": (
-      "base": $--color-primary,
-    ),
-    "success": (
-      "base":  $--color-success,
-    ),
-    "warning": (
-      "base":  $--color-warning,
-    ),
-    "danger": (
-      "base":  $--color-danger,
-    ),
-    "info": (
-      "base":  $--color-info,
-    ),
-
-  ),
+  $colors: $--colors,
   $text-color: (
     'regular': #606266,
     'secondary': #909399,
@@ -46,5 +46,5 @@ $--color-info: #909399;
 
 
 // :export {
-//   colorPrimary: $--color-primary;
+//   colorPrimary: $color-primary;
 // }

src/styles/index.scss

@@ -1,8 +1,7 @@
 
-@import '@/styles/global-class.scss';
-@import '@/styles/element-variables.scss';
-@import '@/styles/theme.scss';
-@import '@/styles/element-status.scss';
+@use '@/styles/global-class.scss';
+@use '@/styles/theme.scss';
+@use '@/styles/element-status.scss';
 
 body {
   width: 100vw;

src/styles/theme.scss

@@ -1,17 +1,17 @@
-
-@import "element-plus/theme-chalk/src/index";
+@use '@/styles/element-variables.scss' as *;
+@use "element-plus/theme-chalk/src/index" as *;
 
 
 
 #nprogress .bar {
-  background: $--color-primary !important;
+  background: $color-success !important;
 }
 
 #nprogress .peg {
-  box-shadow: 0 0 10px $--color-primary, 0 0 5px $--color-primary !important;
+  box-shadow: 0 0 10px $color-primary, 0 0 5px $color-primary !important;
 }
 
 #nprogress .spinner-icon {
-  border-top-color: $--color-primary;
-  border-left-color: $--color-primary;
-}
+  border-top-color: $color-primary;
+  border-left-color: $color-primary;
+}

vite.config.js

@@ -55,7 +55,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: "@import './src/styles/element-variables.scss';"
+        additionalData: `@use '@/styles/element-variables.scss' as *;`
       }
     }
   }