chore: use sass modern api (#665)

Author: alexzhang1030

packages/client/package.json

@@ -55,7 +55,7 @@
     "floating-vue": "5.2.2",
     "ohash": "^1.1.4",
     "pinia": "^2.2.4",
-    "sass": "^1.80.3",
+    "sass-embedded": "^1.80.5",
     "simple-git-hooks": "^2.11.1",
     "unocss": "^0.63.4",
     "unplugin": "^1.14.1",

packages/client/vite.base.config.ts

@@ -11,6 +11,13 @@ export default {
       '~/': `${resolve(__dirname)}/src/`,
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
   build: {
     chunkSizeWarningLimit: 5000,
   },

packages/overlay/package.json

@@ -30,7 +30,7 @@
     "@iconify/json": "^2.2.262",
     "@types/node": "^20.16.14",
     "@vitejs/plugin-vue": "^5.1.4",
-    "sass": "^1.80.3",
+    "sass-embedded": "^1.80.5",
     "vite": "^5.4.9",
     "vue": "^3.5.12"
   }

packages/overlay/vite.config.ts

@@ -9,6 +9,13 @@ export default defineConfig({
       '~/': `${resolve(__dirname)}/src/`,
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
   define: {
     'process.env': process.env,
   },

packages/playground/applet/package.json

@@ -23,7 +23,7 @@
     "@vue/devtools-core": "workspace:*",
     "@vue/devtools-kit": "workspace:*",
     "@vue/devtools-shared": "workspace:*",
-    "sass": "^1.80.3",
+    "sass-embedded": "^1.80.5",
     "serve": "^14.2.4",
     "typescript": "^5.6.3",
     "unocss": "^0.63.4",

packages/playground/applet/vite.config.ts

@@ -20,6 +20,13 @@ export default defineConfig({
       ignore: ['h'],
     }),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
   server: {
     port: 3000,
   },

packages/playground/basic/package.json

@@ -22,7 +22,7 @@
     "@tanstack/vue-query-devtools": "^5.59.13",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/devtools": "workspace:^",
-    "sass": "^1.80.3",
+    "sass-embedded": "^1.80.5",
     "serve": "^14.2.4",
     "typescript": "^5.6.3",
     "unocss": "^0.63.4",

packages/playground/basic/vite.config.ts

@@ -8,6 +8,13 @@ import inspect from 'vite-plugin-inspect'
 import VueDevTools from 'vite-plugin-vue-devtools'
 // https://vitejs.dev/config/
 export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
   plugins: [
     vue(),
     commonjs(),

packages/playground/multi-app/package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
-    "sass": "^1.80.3",
+    "sass-embedded": "^1.80.5",
     "serve": "^14.2.4",
     "typescript": "^5.6.3",
     "unocss": "^0.63.4",

packages/playground/multi-app/vite.config.ts

@@ -7,6 +7,13 @@ import VueDevtools from 'vite-plugin-vue-devtools'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
   plugins: [
     vue(),
     VueDevtools(),