chore: test new Vite 5.4.2 sass modern stuff

README.md

@@ -1,8 +1,15 @@
 # nuxt3-vuetify3-issue-15412
 
-This repository using local `vite-plugin-vuetify` tgz from [this PR at vite-plugin-vuetify](https://github.com/vuetifyjs/vuetify-loader/pull/332), check [issue #15412 in nuxt repository](https://github.com/nuxt/nuxt/issues/15412).
+Testing Vite 5.4.2 ([fix sass file:// reference](https://github.com/vitejs/vite/pull/17909)): missing sourcemap, even enabling `vite.css.devSourcemap`.
 
-The code using the reproduction from [this comment in previous issue](https://github.com/nuxt/nuxt/issues/15412#issuecomment-1399189084).
+Testing [fix sass modern source map](https://github.com/vitejs/vite/pull/17938) it is working:
+- add `"vite": "https://pkg.pr.new/vite@561b940"` to `package.json` dependencies
+- and same entry to `package.json` resolutions
+- initial run will fail: you need to remove `vite.css.sass` from `nuxt.config.ts`
+
+then run `pnpm install && pnpm dedupe && pnpm nuxt prepare`.
+
+To start dev server run `pnpm run`.
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/userquin/nuxt3-vuetify3-issue-15412)
 

assets/variables.scss

@@ -1,5 +1,6 @@
 @use 'vuetify/settings' with
   (
+    /*$utilities: false,*/
     $body-font-family: 'Inter var',
     $field-font-size: 15px,
     $field-border-radius: 8px,

nuxt.config.ts

@@ -1,17 +1,58 @@
 import vuetify from 'vite-plugin-vuetify';
 
 export default defineNuxtConfig({
+  compatibilityDate: '2024-08-23',
   css: ['vuetify/styles', '@/assets/main.scss'],
   build: {
     transpile: ['vuetify']
   },
   vite: {
+    plugins: [{
+      name: 'check',
+      enforce: 'post',
+      configResolved(config) {
+        console.log(config.css)
+      }
+    }],
+    css: {
+      devSourcemap: true,
+      preprocessorOptions: {
+        // remove this entry when using vite from https://pkg.pr.new/vite@561b940
+        sass: {
+          api: 'modern-compiler'
+        },
+        /* prepare some tests for vuetify styles plugin: virtual
+        scss: {
+          api: 'modern',
+          importers: [
+            {
+              canonicalize(url: string) {
+                console.log('URL: ' + url)
+                return url === 'virtual-dep'
+                    ? new URL('custom-importer:virtual-dep')
+                    : null
+              },
+              load() {
+                console.log('WTF')
+                return {
+                  contents: ``,
+                  syntax: 'scss',
+                }
+              },
+            },
+          ]
+        }
+        */
+      },
+      // preprocessorMaxWorkers: true,
+    },
     ssr: {
       noExternal: ['vuetify']
     }
   },
   devtools: { enabled: true },
   features: {
+    inlineStyles: false,
     devLogs: false,
   },
   modules: [

package.json

@@ -11,17 +11,16 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "vuetify": "^3.5.11"
+    "vuetify": "^3.7.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.1.1",
-    "nuxt": "^3.11.1",
-    "nuxt-icon": "^0.6.9",
-    "sass": "^1.57.1",
-    "typescript": "5.4.3",
-    "vite": "^5.2.2",
-    "vite-plugin-vuetify": "file:vite-plugin-vuetify-v2.0.3.tgz",
-    "vue-tsc": "^2.0.7"
+    "@nuxt/devtools": "^1.3.14",
+    "nuxt": "^3.13.0",
+    "nuxt-icon": "^0.6.10",
+    "sass-embedded": "^1.77.8",
+    "typescript": "^5.5.4",
+    "vite-plugin-vuetify": "^2.0.4",
+    "vue-tsc": "^2.0.29"
   },
   "stackblitz": {
     "installDependencies": false,