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

@@ -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: {

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);
   }

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 {

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: [
         {