Merge pull request #26 from pdsuwwz/feature/upgrade-scss

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

src/App.vue

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

src/components/Navigation/Avatar.vue

@@ -76,7 +76,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

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

src/locales/Translations.vue

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

src/modules/Project/components/ProjectItem.vue

@@ -173,7 +173,7 @@ export default defineComponent({
       & > svg {
         width: 20px;
         font-size: 20px;
-        color: $--color-primary
+        color: $color-primary
       }
     }
     .project-item__name-desc {
@@ -190,13 +190,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;
       }
     }
   }
@@ -222,10 +222,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/modules/UserAccount/pages/setting.vue

@@ -12,7 +12,7 @@ export default defineComponent({
 })
 </script>
 <style lang='scss' scoped>
-//@import url(); 引入公共css类
+//@use url(); 引入公共css类
 .wrap-user-setting {
 
 }

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,34 +4,35 @@
 // otherwise it will affect the packaging speed.
 
 /* theme color */
-// $--color-primary: #4686FF;
-$--color-primary: #3c40c6;
-$--color-success: #52C41A;
-$--color-warning: #FAAD14;
-$--color-danger: #FA5555;
-$--color-info: #909399;
+// $color-primary: #4686FF;
+$color-primary: #3c40c6;
+$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: (
     'primary': initial,
     'regular': #606266,
@@ -48,5 +49,5 @@ $--color-info: #909399;
 
 
 // :export {
-//   colorPrimary: $--color-primary;
+//   colorPrimary: $color-primary;
 // }

src/styles/index.scss

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

src/styles/theme.scss

@@ -1,17 +1,18 @@
 
-@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-primary !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.ts

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