diff --git a/package.json b/package.json
index a587ddfa5f..31c85188d9 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
 {
   "name": "@nutui/nutui-react-taro",
   "version": "3.0.0-beta.12",
-  "style": "dist/style.css",
+  "description": "京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/es/packages/nutui.react.build.js",
   "typings": "dist/es/packages/nutui.react.build.d.ts",
+  "style": "dist/style.css",
   "sideEffects": [
     "*.scss",
     "dist/es/**/style/*",
@@ -13,7 +14,6 @@
     "dist/styles/font/*",
     "dist/styles/font-jmapp/*"
   ],
-  "description": "京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序",
   "keywords": [
     "nutui",
     "nutui2",
@@ -44,6 +44,10 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "lint-staged": {
+    "*.{scss,md}": "prettier --write",
+    "*.{ts,tsx,js}": "eslint --fix"
+  },
   "scripts": {
     "add": "node scripts/create-component-mode.js && npm run prepare",
     "add:taro:config": "node scripts/taro/generate-taro-route.js",
@@ -52,11 +56,9 @@
     "changelog": "node ./scripts/generate-changelog.js",
     "clone:jdharmony": "node ./scripts/harmony/clone-jdharmony.js",
     "dev": "vite --open --force",
-    "dev:rtl": "VITE_RTL=rtl vite --open --force",
-    "dev:jrkf": "VITE_APP_PROJECT_ID=jrkf vite --open --force",
-    "dev:taro:rn:dark": "THEME=dark pnpm dev:taro:rn",
+    "dev:rtl": "VITE_RTL=rtl npm run dev",
+    "dev:jrkf": "VITE_APP_PROJECT_ID=jrkf npm run dev",
     "dev:taro": "pnpm run update:taro:entry && pnpm --dir ./packages/nutui-taro-demo dev",
-    "dev:taro:h5": "pnpm dev:taro h5",
     "dev:jdtaro": "pnpm run update:taro:entry && JD=1 pnpm --dir ./packages/nutui-taro-demo dev",
     "dev:jdtaro:jdharmonycpp": "pnpm run clone:jdharmony cpp &&pnpm run update:taro:entry && JD=1 pnpm --dir ./packages/nutui-taro-demo dev:jdharmonycpp",
     "dev:jdtaro:jdharmony": "pnpm run clone:jdharmony  && pnpm run update:taro:entry && JD=1 pnpm --dir ./packages/nutui-taro-demo dev:jdharmony",
@@ -94,10 +96,6 @@
     "update:taro:entry": "node ./scripts/harmony/update-taro-entry",
     "upgradeTaro": "pnpm --dir ./packages/nutui-taro-demo upgradeTaro"
   },
-  "lint-staged": {
-    "*.{scss,md}": "prettier --write",
-    "*.{ts,tsx,js}": "eslint"
-  },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@nutui/icons-react": "^3.0.0-beta.2",
@@ -228,7 +226,6 @@
   "resolutions": {
     "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
-    "sass": "1.77.6",
     "@tarojs/api": "4.0.8-beta.1",
     "@tarojs/components": "4.0.8-beta.1"
   }
diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss
index 169fe4bf6d..bc813e5e6c 100644
--- a/src/packages/calendar/calendar.scss
+++ b/src/packages/calendar/calendar.scss
@@ -3,6 +3,7 @@
 .nut-calendar {
   position: relative;
   display: flex;
+
   flex-direction: column;
   flex: 1;
   font-size: $calendar-base-font-size;
diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss
index ba888dd854..b097543f9c 100644
--- a/src/packages/card/card.scss
+++ b/src/packages/card/card.scss
@@ -1,6 +1,6 @@
 @import '../price/price.scss';
 @import '../tag/tag.scss';
-@import '../../styles/mixins/text-ellipsis.scss';
+@use '../../styles/mixins/text-ellipsis.scss' as *;
 
 .nut-card {
   width: 100%;
diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss
index 0aed9a8a87..8f84ffd6da 100644
--- a/src/packages/dialog/dialog.scss
+++ b/src/packages/dialog/dialog.scss
@@ -1,6 +1,6 @@
 @import '../button/button.scss';
 @import '../overlay/overlay.scss';
-@import '../../styles/mixins/index';
+@use '../../styles/mixins/text-ellipsis.scss' as *;
 
 .nut-dialog {
   display: flex;
diff --git a/src/packages/menu/menu.scss b/src/packages/menu/menu.scss
index 68f15e55a8..0ef5d14053 100644
--- a/src/packages/menu/menu.scss
+++ b/src/packages/menu/menu.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins/text-ellipsis.scss';
+@use '../../styles/mixins/text-ellipsis.scss' as *;
 @import '../menuitem/menuitem.scss';
 
 .nut-menu {
diff --git a/src/packages/sidebar/sidebar.scss b/src/packages/sidebar/sidebar.scss
index 257bc57e72..bb73b1bb6d 100644
--- a/src/packages/sidebar/sidebar.scss
+++ b/src/packages/sidebar/sidebar.scss
@@ -1,4 +1,3 @@
-@import '../../styles/mixins/index';
 @import '../sidebaritem/sidebaritem.scss';
 
 .nut-sidebar {
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index ec7ba1c994..8ba00bf548 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -1,4 +1,3 @@
-@import '../../styles/mixins/index';
 @import '../tabpane/tabpane.scss';
 
 .nut-tabs {
diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss
index a420f6f8cf..331b83fcaa 100644
--- a/src/packages/uploader/uploader.scss
+++ b/src/packages/uploader/uploader.scss
@@ -1,5 +1,5 @@
 @import '../progress/progress.scss';
-@import '../../styles/mixins/text-ellipsis.scss';
+@use '../../styles/mixins/text-ellipsis.scss' as *;
 
 .nut-uploader {
   position: relative;
diff --git a/src/sites/assets/styles/highlight.scss b/src/sites/assets/styles/highlight.scss
index 3a8f61f0e4..07d841425e 100644
--- a/src/sites/assets/styles/highlight.scss
+++ b/src/sites/assets/styles/highlight.scss
@@ -1,3 +1,5 @@
+@use './variables.scss' as *;
+
 code {
   position: relative;
   display: block;
diff --git a/src/sites/assets/styles/md-style.scss b/src/sites/assets/styles/md-style.scss
index e60139037a..b9952349a8 100644
--- a/src/sites/assets/styles/md-style.scss
+++ b/src/sites/assets/styles/md-style.scss
@@ -1,4 +1,5 @@
-@import 'highlight.scss';
+@use 'sass:color';
+@use './variables.scss' as *;
 
 .doc-content-document {
   position: relative;
@@ -21,11 +22,11 @@
     -webkit-font-smoothing: auto;
 
     &:hover {
-      color: mix(black, $nutui-doc-blue, 10%);
+      color: color.adjust($nutui-doc-blue, $lightness: -10%);
     }
 
     &:active {
-      color: mix(black, $nutui-doc-blue, 20%);
+      color: color.adjust($nutui-doc-blue, $lightness: -20%);
     }
   }
 
diff --git a/src/sites/assets/styles/variables.scss b/src/sites/assets/styles/variables.scss
index fc6b3a5203..679497212b 100644
--- a/src/sites/assets/styles/variables.scss
+++ b/src/sites/assets/styles/variables.scss
@@ -8,6 +8,10 @@ $doc-default-primary-bg: linear-gradient(
   rgba(250, 63, 25, 1) 100%
 );
 
+$color-title: var(--nutui-gray-7, #1a1a1a) !default;
+$white: #ffffff !default;
+$black: $color-title !default;
+
 // color
 // 红色
 $theme-red: #ff0f23;
@@ -80,6 +84,7 @@ $doc-header-bg: url('../../assets/images/header-bg.png') no-repeat;
 // nav
 $doc-default-nav-bg: $white;
 $doc-default-nav-color: $color-title;
+
 // home
 $theme-black-content-bg: #060506;
 
diff --git a/src/sites/doc/App.scss b/src/sites/doc/App.scss
index 13ed9d9c69..d722f8d7e6 100644
--- a/src/sites/doc/App.scss
+++ b/src/sites/doc/App.scss
@@ -1,3 +1,5 @@
+@use '../assets/styles/variables.scss' as *;
+
 ::selection {
   background: $doc-default-color;
   color: #fff;
diff --git a/src/sites/doc/components/header/header.scss b/src/sites/doc/components/header/header.scss
index b0cb6f2c24..bb583dc93d 100644
--- a/src/sites/doc/components/header/header.scss
+++ b/src/sites/doc/components/header/header.scss
@@ -1,3 +1,5 @@
+@use '../../../assets/styles/variables.scss' as variables;
+
 .doc {
   &-header {
     z-index: 2;
@@ -8,8 +10,8 @@
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    height: $doc-header-height;
-    line-height: $doc-header-height;
+    height: variables.$doc-header-height;
+    line-height: variables.$doc-header-height;
     text-align: left;
     padding: 0 50px;
     font-size: 20px;
@@ -124,7 +126,7 @@
     padding: 0 30px 0 15px;
     line-height: 26px;
     font-size: 14px;
-    color: $theme-red-word;
+    color: variables.$theme-red-word;
     background-position: right 15px top 12px;
     background-size: 8px 5px;
     background-repeat: no-repeat;
@@ -155,8 +157,8 @@
 // 颜色
 .doc-header {
   &-red {
-    background-image: $theme-red-header-bg;
-    color: $theme-red-word;
+    background-image: variables.$theme-red-header-bg;
+    color: variables.$theme-red-word;
     .header {
       &-logo {
         .logo-link {
@@ -164,32 +166,32 @@
             no-repeat center/100%;
         }
         .logo-border {
-          background: $theme-red-border;
+          background: variables.$theme-red-border;
         }
       }
       &-nav {
         .search-box {
           .search-input {
-            color: $theme-red-word;
+            color: variables.$theme-red-word;
             background-position: 0 0;
             &::-webkit-input-placeholder {
-              color: $theme-red-input;
+              color: variables.$theme-red-input;
             }
           }
         }
         .nav-box {
           .nav-item {
-            color: $theme-red-word;
+            color: variables.$theme-red-word;
             a {
-              color: $theme-red-word;
+              color: variables.$theme-red-word;
             }
             &.active {
-              color: $theme-red-actice;
+              color: variables.$theme-red-actice;
               &:after {
                 background-position: 0 0;
               }
               a {
-                color: $theme-red-actice;
+                color: variables.$theme-red-actice;
               }
             }
           }
@@ -213,25 +215,25 @@
         }
       }
       &-hd {
-        color: $theme-red-word;
-        border: 1px solid $theme-white-select-border;
+        color: variables.$theme-red-word;
+        border: 1px solid variables.$theme-white-select-border;
       }
       &-bd {
-        color: $theme-white-select-word;
+        color: variables.$theme-white-select-word;
       }
       &-item {
-        border-color: $theme-red-select-border;
-        background-color: $theme-red-select-bg;
+        border-color: variables.$theme-red-select-border;
+        background-color: variables.$theme-red-select-bg;
         &:hover {
-          color: $theme-red;
+          color: variables.$theme-red;
         }
       }
     }
   }
   &-white {
-    background: $white;
-    color: $theme-white-word;
-    border-bottom: 1px solid $theme-white-box-border;
+    background: variables.$white;
+    color: variables.$theme-white-word;
+    border-bottom: 1px solid variables.$theme-white-box-border;
     .header {
       &-logo {
         .logo-link {
@@ -239,32 +241,32 @@
             center/100%;
         }
         .logo-border {
-          background: $theme-white-border;
+          background: variables.$theme-white-border;
         }
       }
       &-nav {
         .search-box {
           .search-input {
-            color: $theme-white-word;
+            color: variables.$theme-white-word;
             background-position: 0 -22px;
             &::-webkit-input-placeholder {
-              color: $theme-white-input;
+              color: variables.$theme-white-input;
             }
           }
         }
         .nav-box {
           .nav-item {
-            color: $theme-white-word;
+            color: variables.$theme-white-word;
             a {
-              color: $theme-white-word;
+              color: variables.$theme-white-word;
             }
             &.active {
-              color: $theme-white-actice;
+              color: variables.$theme-white-actice;
               &:after {
                 background-position: 0 -13px;
               }
               a {
-                color: $theme-white-actice;
+                color: variables.$theme-white-actice;
               }
             }
           }
@@ -288,25 +290,25 @@
         }
       }
       &-hd {
-        color: $theme-white-select-word;
-        border: 1px solid $theme-white-select-border;
+        color: variables.$theme-white-select-word;
+        border: 1px solid variables.$theme-white-select-border;
       }
       &-bd {
-        color: $theme-white-select-word;
+        color: variables.$theme-white-select-word;
       }
       &-item {
-        border-color: $theme-white-select-border;
-        background-color: $theme-white-select-bg;
+        border-color: variables.$theme-white-select-border;
+        background-color: variables.$theme-white-select-bg;
         &:hover {
-          color: $theme-white-actice;
+          color: variables.$theme-white-actice;
         }
       }
     }
   }
   &-black {
-    background: $black;
-    color: $theme-black-word;
-    border-bottom: 1px solid $theme-black-box-border;
+    background: variables.$black;
+    color: variables.$theme-black-word;
+    border-bottom: 1px solid variables.$theme-black-box-border;
     .header {
       &-logo {
         .logo-link {
@@ -314,32 +316,32 @@
             center/100%;
         }
         .logo-border {
-          background: $theme-black-border;
+          background: variables.$theme-black-border;
         }
       }
       &-nav {
         .search-box {
           .search-input {
-            color: $theme-black-word;
+            color: variables.$theme-black-word;
             background-position: 0 -44px;
             &::-webkit-input-placeholder {
-              color: $theme-black-input;
+              color: variables.$theme-black-input;
             }
           }
         }
         .nav-box {
           .nav-item {
-            color: $theme-black-word;
+            color: variables.$theme-black-word;
             a {
-              color: $theme-black-word;
+              color: variables.$theme-black-word;
             }
             &.active {
-              color: $theme-black-actice;
+              color: variables.$theme-black-actice;
               &:after {
                 background-position: 0 -13px;
               }
               a {
-                color: $theme-black-actice;
+                color: variables.$theme-black-actice;
               }
             }
           }
@@ -363,19 +365,19 @@
         }
       }
       &-hd {
-        color: $theme-black-select-word;
-        background-color: $theme-black-select-bg;
-        border: 1px solid $theme-black-select-border;
+        color: variables.$theme-black-select-word;
+        background-color: variables.$theme-black-select-bg;
+        border: 1px solid variables.$theme-black-select-border;
       }
       &-bd {
-        color: $theme-black-select-word;
+        color: variables.$theme-black-select-word;
       }
       &-item {
-        background-color: $theme-black-select-bg;
-        border-color: $theme-black-select-bg;
+        background-color: variables.$theme-black-select-bg;
+        border-color: variables.$theme-black-select-bg;
         &:hover {
-          background-color: $theme-black-select-hover;
-          border-color: $theme-black-select-hover;
+          background-color: variables.$theme-black-select-hover;
+          border-color: variables.$theme-black-select-hover;
         }
       }
     }
diff --git a/src/sites/doc/components/nav/nav.scss b/src/sites/doc/components/nav/nav.scss
index 0779dac2a5..1026d7d2b6 100644
--- a/src/sites/doc/components/nav/nav.scss
+++ b/src/sites/doc/components/nav/nav.scss
@@ -1,11 +1,13 @@
+@use '../../../assets/styles/variables.scss' as variables;
+
 .doc {
   &-nav {
     position: absolute;
-    top: $doc-header-height;
+    top: variables.$doc-header-height;
     left: 0;
     bottom: 0;
     z-index: 1;
-    background: $white;
+    background: variables.$white;
     width: 290px;
     height: 100vh;
     border-right: 1px solid #eee;
@@ -25,7 +27,7 @@
           cursor: pointer;
 
           &:hover {
-            color: $doc-default-color;
+            color: variables.$doc-default-color;
           }
         }
       }
@@ -34,7 +36,7 @@
         height: 48px;
         line-height: 48px;
         font-size: 14px;
-        color: $doc-default-nav-color;
+        color: variables.$doc-default-nav-color;
         font-weight: bold;
         position: relative;
 
@@ -62,7 +64,7 @@
 
           &:hover {
             a {
-              color: $doc-default-color;
+              color: variables.$doc-default-color;
             }
           }
 
@@ -71,19 +73,19 @@
 
             &.router-link-active,
             &.active {
-              color: $doc-default-color !important;
+              color: variables.$doc-default-color !important;
             }
 
             &:link,
             &:visited {
-              color: $color-title;
+              color: variables.$color-title;
             }
 
             &:hover {
-              color: $doc-default-color;
+              color: variables.$doc-default-color;
 
               &:visited {
-                color: $doc-default-color;
+                color: variables.$doc-default-color;
               }
             }
 
diff --git a/src/sites/doc/main.tsx b/src/sites/doc/main.tsx
index 2345d6fed1..002ea04692 100644
--- a/src/sites/doc/main.tsx
+++ b/src/sites/doc/main.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { isMobile } from '@/sites/assets/util'
 import '@/sites/assets/styles/reset.scss'
+import '@/sites/assets/styles/highlight.scss'
 import '@/sites/assets/styles/md-style.scss'
 import App from './App'
 
diff --git a/src/sites/mobile/App.scss b/src/sites/mobile/App.scss
index 2dbd28864d..a0ce5088db 100644
--- a/src/sites/mobile/App.scss
+++ b/src/sites/mobile/App.scss
@@ -1,4 +1,4 @@
-@import '../../styles/jd-font.scss';
+@use '../../styles/jd-font.scss';
 
 html,
 body {
diff --git a/src/sites/theme/components/header/header.scss b/src/sites/theme/components/header/header.scss
index a090f32d67..50e60372b1 100644
--- a/src/sites/theme/components/header/header.scss
+++ b/src/sites/theme/components/header/header.scss
@@ -1,3 +1,5 @@
+@use '../../../assets/styles/variables.scss' as variables;
+
 .doc {
   &-header {
     //position: fixed;
@@ -9,8 +11,8 @@
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    height: $doc-header-height;
-    line-height: $doc-header-height;
+    height: variables.$doc-header-height;
+    line-height: variables.$doc-header-height;
     text-align: left;
     padding: 0 50px;
     font-size: 20px;
@@ -126,7 +128,7 @@
     padding: 0 30px 0 15px;
     line-height: 26px;
     font-size: 14px;
-    color: $theme-red-word;
+    color: variables.$theme-red-word;
     background-position: right 15px top 12px;
     background-size: 8px 5px;
     background-repeat: no-repeat;
@@ -158,8 +160,8 @@
 .doc-header {
   // 红色
   &-red {
-    background-image: $theme-red-header-bg;
-    color: $theme-red-word;
+    background-image: variables.$theme-red-header-bg;
+    color: variables.$theme-red-word;
     .header {
       &-logo {
         .logo-link {
@@ -167,32 +169,32 @@
             center/100%;
         }
         .logo-border {
-          background: $theme-red-border;
+          background: variables.$theme-red-border;
         }
       }
       &-nav {
         .search-box {
           .search-input {
-            color: $theme-red-word;
+            color: variables.$theme-red-word;
             background-position: 0 0;
             &::-webkit-input-placeholder {
-              color: $theme-red-input;
+              color: variables.$theme-red-input;
             }
           }
         }
         .nav-box {
           .nav-item {
-            color: $theme-red-word;
+            color: variables.$theme-red-word;
             a {
-              color: $theme-red-word;
+              color: variables.$theme-red-word;
             }
             &.active {
-              color: $theme-red-actice;
+              color: variables.$theme-red-actice;
               &:after {
                 background-position: 0 0;
               }
               a {
-                color: $theme-red-actice;
+                color: variables.$theme-red-actice;
               }
             }
           }
@@ -219,26 +221,26 @@
         }
       }
       &-hd {
-        color: $theme-red-word;
-        border: 1px solid $theme-white-select-border;
+        color: variables.$theme-red-word;
+        border: 1px solid variables.$theme-white-select-border;
       }
       &-bd {
-        color: $theme-white-select-word;
+        color: variables.$theme-white-select-word;
       }
       &-item {
-        border-color: $theme-red-select-border;
-        background-color: $theme-red-select-bg;
+        border-color: variables.$theme-red-select-border;
+        background-color: variables.$theme-red-select-bg;
         &:hover {
-          color: $theme-red;
+          color: variables.$theme-red;
         }
       }
     }
   }
   // 白色
   &-white {
-    background: $white;
-    color: $theme-white-word;
-    border-bottom: 1px solid $theme-white-box-border;
+    background: variables.$white;
+    color: variables.$theme-white-word;
+    border-bottom: 1px solid variables.$theme-white-box-border;
     .header {
       &-logo {
         .logo-link {
@@ -246,32 +248,32 @@
             center/100%;
         }
         .logo-border {
-          background: $theme-white-border;
+          background: variables.$theme-white-border;
         }
       }
       &-nav {
         .search-box {
           .search-input {
-            color: $theme-white-word;
+            color: variables.$theme-white-word;
             background-position: 0 -22px;
             &::-webkit-input-placeholder {
-              color: $theme-white-input;
+              color: variables.$theme-white-input;
             }
           }
         }
         .nav-box {
           .nav-item {
-            color: $theme-white-word;
+            color: variables.$theme-white-word;
             a {
-              color: $theme-white-word;
+              color: variables.$theme-white-word;
             }
             &.active {
-              color: $theme-white-actice;
+              color: variables.$theme-white-actice;
               &:after {
                 background-position: 0 -13px;
               }
               a {
-                color: $theme-white-actice;
+                color: variables.$theme-white-actice;
               }
             }
           }
@@ -298,26 +300,26 @@
         }
       }
       &-hd {
-        color: $theme-white-select-word;
-        border: 1px solid $theme-white-select-border;
+        color: variables.$theme-white-select-word;
+        border: 1px solid variables.$theme-white-select-border;
       }
       &-bd {
-        color: $theme-white-select-word;
+        color: variables.$theme-white-select-word;
       }
       &-item {
-        border-color: $theme-white-select-border;
-        background-color: $theme-white-select-bg;
+        border-color: variables.$theme-white-select-border;
+        background-color: variables.$theme-white-select-bg;
         &:hover {
-          color: $theme-white-actice;
+          color: variables.$theme-white-actice;
         }
       }
     }
   }
   // 黑色
   &-black {
-    background: $black;
-    color: $theme-black-word;
-    border-bottom: 1px solid $theme-black-box-border;
+    background: variables.$black;
+    color: variables.$theme-black-word;
+    border-bottom: 1px solid variables.$theme-black-box-border;
     .header {
       &-logo {
         .logo-link {
@@ -325,32 +327,32 @@
             center/100%;
         }
         .logo-border {
-          background: $theme-black-border;
+          background: variables.$theme-black-border;
         }
       }
       &-nav {
         .search-box {
           .search-input {
-            color: $theme-black-word;
+            color: variables.$theme-black-word;
             background-position: 0 -44px;
             &::-webkit-input-placeholder {
-              color: $theme-black-input;
+              color: variables.$theme-black-input;
             }
           }
         }
         .nav-box {
           .nav-item {
-            color: $theme-black-word;
+            color: variables.$theme-black-word;
             a {
-              color: $theme-black-word;
+              color: variables.$theme-black-word;
             }
             &.active {
-              color: $theme-black-actice;
+              color: variables.$theme-black-actice;
               &:after {
                 background-position: 0 -13px;
               }
               a {
-                color: $theme-black-actice;
+                color: variables.$theme-black-actice;
               }
             }
           }
@@ -377,19 +379,19 @@
         }
       }
       &-hd {
-        color: $theme-black-select-word;
-        background-color: $theme-black-select-bg;
-        border: 1px solid $theme-black-select-border;
+        color: variables.$theme-black-select-word;
+        background-color: variables.$theme-black-select-bg;
+        border: 1px solid variables.$theme-black-select-border;
       }
       &-bd {
-        color: $theme-black-select-word;
+        color: variables.$theme-black-select-word;
       }
       &-item {
-        background-color: $theme-black-select-bg;
-        border-color: $theme-black-select-bg;
+        background-color: variables.$theme-black-select-bg;
+        border-color: variables.$theme-black-select-bg;
         &:hover {
-          background-color: $theme-black-select-hover;
-          border-color: $theme-black-select-hover;
+          background-color: variables.$theme-black-select-hover;
+          border-color: variables.$theme-black-select-hover;
         }
       }
     }
diff --git a/src/sites/theme/components/nav/nav.scss b/src/sites/theme/components/nav/nav.scss
index ea84e1709b..50d5fe3ea0 100644
--- a/src/sites/theme/components/nav/nav.scss
+++ b/src/sites/theme/components/nav/nav.scss
@@ -1,11 +1,13 @@
+@use '../../../assets/styles/variables.scss' as variables;
+
 .doc {
   &-nav {
     position: absolute;
-    top: $doc-header-height;
+    top: variables.$doc-header-height;
     left: 0;
     bottom: 0;
     z-index: 1;
-    background: $white;
+    background: variables.$white;
     width: 290px;
     height: 100vh;
     border-right: 1px solid #eee;
@@ -25,7 +27,7 @@
           cursor: pointer;
 
           &:hover {
-            color: $doc-default-color;
+            color: variables.$doc-default-color;
           }
         }
       }
@@ -34,7 +36,7 @@
         height: 48px;
         line-height: 48px;
         font-size: 14px;
-        color: $doc-default-nav-color;
+        color: variables.$doc-default-nav-color;
         font-weight: bold;
         position: relative;
 
@@ -62,26 +64,26 @@
 
           &:hover {
             a {
-              color: $doc-default-color;
+              color: variables.$doc-default-color;
             }
           }
 
           a {
             &.router-link-active,
             &.active {
-              color: $doc-default-color !important;
+              color: variables.$doc-default-color !important;
             }
 
             &:link,
             &:visited {
-              color: $color-title;
+              color: variables.$color-title;
             }
 
             &:hover {
-              color: $doc-default-color;
+              color: variables.$doc-default-color;
 
               &:visited {
-                color: $doc-default-color;
+                color: variables.$doc-default-color;
               }
             }
 
diff --git a/src/sites/theme/mainTheme.tsx b/src/sites/theme/mainTheme.tsx
index f21ff6b64c..4cf6b3ad23 100644
--- a/src/sites/theme/mainTheme.tsx
+++ b/src/sites/theme/mainTheme.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import * as ReactDOM from 'react-dom/client'
 import '@/sites/assets/styles/reset.scss'
+import '@/sites/assets/styles/highlight.scss'
 import '@/sites/assets/styles/md-style.scss'
 import App from './AppTheme'
 
diff --git a/src/styles/mixins/index.scss b/src/styles/mixins/index.scss
deleted file mode 100644
index f643ead6e4..0000000000
--- a/src/styles/mixins/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'make-animation.scss';
-@import 'text-ellipsis.scss';
diff --git a/vite.config.ts b/vite.config.ts
index 4d81daf249..b535732180 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,7 @@ import { readFileSync } from 'node:fs'
 
 const projectID = process.env.VITE_APP_PROJECT_ID || ''
 
-let fileStr = `@import "@/styles/variables.scss";@import "@/sites/assets/styles/variables.scss";@import '@/styles/theme-default.scss';\n`
+let fileStr = `@use "@/styles/variables.scss" as *;@use '@/styles/theme-default.scss' as *;\n`
 if (projectID) {
   fileStr = `@import '@/styles/variables-${projectID}.scss';\n@import "@/sites/assets/styles/variables.scss";\n@import '@/styles/font-${projectID}/iconfont.css';\n@import '@/styles/theme-${projectID}.scss';\n`
 }
@@ -93,7 +93,7 @@ export default defineConfig(async (): Promise<UserConfig> => {
           api: 'modern-compiler',
           additionalData: fileStr,
           // 这里查看可选值：https://github.com/sass/sass/blob/1c9ec00/js-api-doc/deprecations.d.ts#L180
-          silenceDeprecations: ['import', 'global-builtin'],
+          // silenceDeprecations: ['import', 'global-builtin'],
         },
         postcss: {
           plugins: [atImport({ path: join(__dirname, 'src`') })],