From da60940ae337723fff37044b1b1cb205e4fbfae1 Mon Sep 17 00:00:00 2001
From: sea <45450994+warmthsea@users.noreply.github.com>
Date: Tue, 1 Oct 2024 08:45:25 +0800
Subject: [PATCH] chore: fix docs/play dev sass deprecation warning (#18427)

* chore: fix docs/play dev sass deprecation warning

* chore: update

* chore: update
---
 docs/.vitepress/config/vite.ts                 |  7 +++++++
 .../vitepress/components/navbar/vp-search.vue  |  3 +--
 docs/.vitepress/vitepress/styles/css-vars.scss | 18 +++++++++---------
 play/vite.config.ts                            | 15 ++++++++-------
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/docs/.vitepress/config/vite.ts b/docs/.vitepress/config/vite.ts
index 2854a61293..d29f124d3c 100644
--- a/docs/.vitepress/config/vite.ts
+++ b/docs/.vitepress/config/vite.ts
@@ -58,6 +58,13 @@ const alias: AliasOptions = [
 export const getViteConfig = ({ mode }: { mode: string }): ViteConfig => {
   const env = loadEnv(mode, process.cwd(), '')
   return {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          silenceDeprecations: ['legacy-js-api'],
+        },
+      },
+    },
     server: {
       host: true,
       fs: {
diff --git a/docs/.vitepress/vitepress/components/navbar/vp-search.vue b/docs/.vitepress/vitepress/components/navbar/vp-search.vue
index 60e52ebb08..0a2ae2e55d 100644
--- a/docs/.vitepress/vitepress/components/navbar/vp-search.vue
+++ b/docs/.vitepress/vitepress/components/navbar/vp-search.vue
@@ -194,6 +194,7 @@ function initialize(userOptions: any) {
   --docsearch-modal-shadow: var(--el-box-shadow);
 
   transition: background-color var(--el-transition-duration-fast);
+  background-color: transparent;
 
   &.DocSearch-Container {
     z-index: 20000;
@@ -231,8 +232,6 @@ function initialize(userOptions: any) {
     }
   }
 
-  background-color: transparent;
-
   @include respond-to('md') {
     background-color: var(--docsearch-searchbox-background);
   }
diff --git a/docs/.vitepress/vitepress/styles/css-vars.scss b/docs/.vitepress/vitepress/styles/css-vars.scss
index c1e8f2e98a..496943b43d 100644
--- a/docs/.vitepress/vitepress/styles/css-vars.scss
+++ b/docs/.vitepress/vitepress/styles/css-vars.scss
@@ -39,15 +39,6 @@
   /* Screen Size */
   --vp-screen-max-width: 1362px;
 
-  @include respond-to('xxl') {
-    --vp-sidebar-width-small: 234px;
-  }
-
-  @include respond-to('max') {
-    --vp-screen-max-width: 1482px;
-    --vp-sidebar-width-small: 290px;
-  }
-
   // sidebar
   --vp-sidebar-width-mobile: 320px;
   --vp-sidebar-width-small: 266px;
@@ -79,6 +70,15 @@
 
   // link
   --link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
+
+  @include respond-to('xxl') {
+    --vp-sidebar-width-small: 234px;
+  }
+
+  @include respond-to('max') {
+    --vp-screen-max-width: 1482px;
+    --vp-sidebar-width-small: 290px;
+  }
 }
 
 .dark {
diff --git a/play/vite.config.ts b/play/vite.config.ts
index 07f241f5ab..bf0b9b1a96 100644
--- a/play/vite.config.ts
+++ b/play/vite.config.ts
@@ -39,13 +39,14 @@ export default defineConfig(async ({ mode }) => {
   )
 
   return {
-    // css: {
-    //   preprocessorOptions: {
-    //     scss: {
-    //       additionalData: `@use "/styles/custom.scss" as *;`,
-    //     },
-    //   },
-    // },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          // additionalData: `@use "/styles/custom.scss" as *;`,
+          silenceDeprecations: ['legacy-js-api'],
+        },
+      },
+    },
     resolve: {
       alias: [
         {