Update Vite to 5.4.10 and switch to sass-embedded (#23845)

app/package.json

@@ -137,13 +137,13 @@
 		"pinia": "2.2.4",
 		"pretty-ms": "9.1.0",
 		"qrcode": "1.5.4",
-		"sass": "1.79.4",
+		"sass-embedded": "1.80.3",
 		"semver": "7.6.3",
 		"string-width": "7.2.0",
 		"tinymce": "7.4.1",
 		"tus-js-client": "4.2.3",
 		"typescript": "5.6.3",
-		"vite": "5.2.11",
+		"vite": "5.4.10",
 		"vite-plugin-vue-devtools": "7.6.7",
 		"vitest": "2.1.2",
 		"vue": "3.5.11",

app/vite.config.js

@@ -22,6 +22,13 @@ const extensionsPathExists = fs.existsSync(EXTENSIONS_PATH);
 
 // https://vitejs.dev/config/
 export default defineConfig({
+	css: {
+		preprocessorOptions: {
+			scss: {
+				api: 'modern-compiler',
+			},
+		},
+	},
 	plugins: [
 		directusExtensions(),
 		vue(),

packages/components/package.json

@@ -37,7 +37,7 @@
 		"pinia": "2.2.4",
 		"rollup-plugin-node-externals": "7.1.3",
 		"typescript": "5.6.3",
-		"vite": "5.2.11",
+		"vite": "5.4.10",
 		"vite-plugin-dts": "4.2.3",
 		"vitest": "2.1.2",
 		"vue": "3.5.11",

packages/themes/package.json

@@ -41,7 +41,7 @@
 		"pinia": "2.2.4",
 		"rollup-plugin-node-externals": "7.1.3",
 		"typescript": "5.6.3",
-		"vite": "5.2.11",
+		"vite": "5.4.10",
 		"vite-plugin-dts": "4.2.3",
 		"vue": "3.5.11"
 	},