diff --git a/playground/css-sourcemap/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts b/playground/css-sourcemap/__tests__/sass-legacy/sass-legacy.spec.ts
similarity index 100%
rename from playground/css-sourcemap/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts
rename to playground/css-sourcemap/__tests__/sass-legacy/sass-legacy.spec.ts
diff --git a/playground/css-sourcemap/vite.config-sass-modern-compiler.js b/playground/css-sourcemap/vite.config-sass-legacy.js
similarity index 100%
rename from playground/css-sourcemap/vite.config-sass-modern-compiler.js
rename to playground/css-sourcemap/vite.config-sass-legacy.js
diff --git a/playground/css/vite.config-sass-legacy.js b/playground/css/vite.config-sass-legacy.js
new file mode 100644
index 00000000000000..cc6c0ae746cba3
--- /dev/null
+++ b/playground/css/vite.config-sass-legacy.js
@@ -0,0 +1,33 @@
+import path from 'node:path'
+import { pathToFileURL } from 'node:url'
+import { defineConfig } from 'vite'
+import baseConfig from './vite.config.js'
+
+export default defineConfig({
+  ...baseConfig,
+  css: {
+    ...baseConfig.css,
+    preprocessorOptions: {
+      ...baseConfig.css.preprocessorOptions,
+      scss: {
+        api: 'legacy',
+        importer: [
+          function (url) {
+            return url === 'virtual-dep' ? { contents: '' } : null
+          },
+          function (url) {
+            return url === 'virtual-file-absolute'
+              ? {
+                  contents: `@use "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
+                }
+              : null
+          },
+          function (url) {
+            return url.endsWith('.wxss') ? { contents: '' } : null
+          },
+        ],
+        silenceDeprecations: ['legacy-js-api'],
+      },
+    },
+  },
+})
diff --git a/playground/css/vite.config-sass-modern-compiler.js b/playground/css/vite.config-sass-modern-compiler.js
deleted file mode 100644
index 009da79192ec34..00000000000000
--- a/playground/css/vite.config-sass-modern-compiler.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { defineConfig } from 'vite'
-import baseConfig from './vite.config.js'
-import configSassModern from './vite.config-sass-modern.js'
-
-export default defineConfig({
-  ...baseConfig,
-  css: {
-    ...baseConfig.css,
-    preprocessorOptions: {
-      ...baseConfig.css.preprocessorOptions,
-      scss: {
-        ...configSassModern.css.preprocessorOptions.scss,
-      },
-    },
-  },
-})
diff --git a/playground/css/vite.config-sass-modern.js b/playground/css/vite.config-sass-modern.js
index 1dbabb981623d3..90855ac270b7d8 100644
--- a/playground/css/vite.config-sass-modern.js
+++ b/playground/css/vite.config-sass-modern.js
@@ -1,5 +1,3 @@
-import { pathToFileURL } from 'node:url'
-import path from 'node:path'
 import { defineConfig } from 'vite'
 import baseConfig from './vite.config.js'
 
@@ -10,36 +8,10 @@ export default defineConfig({
     preprocessorOptions: {
       ...baseConfig.css.preprocessorOptions,
       scss: {
+        .../** @type {import('vite').SassPreprocessorOptions & { api?: undefined }} */ (
+          baseConfig.css.preprocessorOptions.scss
+        ),
         api: 'modern',
-        additionalData: `$injectedColor: orange;`,
-        importers: [
-          {
-            canonicalize(url) {
-              return url === 'virtual-dep'
-                ? new URL('custom-importer:virtual-dep')
-                : null
-            },
-            load() {
-              return {
-                contents: ``,
-                syntax: 'scss',
-              }
-            },
-          },
-          {
-            canonicalize(url) {
-              return url === 'virtual-file-absolute'
-                ? new URL('custom-importer:virtual-file-absolute')
-                : null
-            },
-            load() {
-              return {
-                contents: `@use "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
-                syntax: 'scss',
-              }
-            },
-          },
-        ],
       },
     },
   },
diff --git a/playground/css/vite.config.js b/playground/css/vite.config.js
index 00ea6ca5a40cea..754559cac6086f 100644
--- a/playground/css/vite.config.js
+++ b/playground/css/vite.config.js
@@ -61,24 +61,35 @@ export default defineConfig({
     },
     preprocessorOptions: {
       scss: {
-        api: 'legacy',
         additionalData: `$injectedColor: orange;`,
-        importer: [
-          function (url) {
-            return url === 'virtual-dep' ? { contents: '' } : null
+        importers: [
+          {
+            canonicalize(url) {
+              return url === 'virtual-dep'
+                ? new URL('custom-importer:virtual-dep')
+                : null
+            },
+            load() {
+              return {
+                contents: ``,
+                syntax: 'scss',
+              }
+            },
           },
-          function (url) {
-            return url === 'virtual-file-absolute'
-              ? {
-                  contents: `@use "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
-                }
-              : null
-          },
-          function (url) {
-            return url.endsWith('.wxss') ? { contents: '' } : null
+          {
+            canonicalize(url) {
+              return url === 'virtual-file-absolute'
+                ? new URL('custom-importer:virtual-file-absolute')
+                : null
+            },
+            load() {
+              return {
+                contents: `@use "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
+                syntax: 'scss',
+              }
+            },
           },
         ],
-        silenceDeprecations: ['legacy-js-api'],
       },
       styl: {
         additionalData: `$injectedColor ?= orange`,