docs: update SASS compiler configuration documentation

Author: AndreyYolkin

docs/guide/index.md

@@ -107,11 +107,7 @@ export interface MOptions {
   prefixComposables?: boolean
   /**
    * Vuetify styles.
-   *
-   * If you want to use configFile on SSR, you have to disable `experimental.inlineSSRStyles` in nuxt.config.
-   *
-   * @see https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
-   * @see https://github.com/vuetifyjs/nuxt-module/issues/78 and https://github.com/vuetifyjs/nuxt-module/issues/74
+   * Specify `none` to disable Vuetify styles.
    *
    * @default true
    */
@@ -130,6 +126,7 @@ export interface MOptions {
    * @see https://vitejs.dev/config/shared-options.html#css-preprocessormaxworkers
    *
    * @default false
+   * @deprecated Vite 7 supports only the modern SASS compiler and API.
    */
   disableModernSassCompiler?: boolean
   /**

packages/vuetify-nuxt-module/src/types.ts

@@ -249,14 +249,20 @@ export interface MOptions {
     configFile: string
   }
   /**
-   * The module will add `vuetify/styles` in Nuxt `css` by default.
+   * Disable the modern SASS compiler and API.
    *
-   * If you want to add custom styles, you should enable this flag to avoid registering `vuetify/styles`.
+   * The module will check for `sass-embedded` dev dependency:
+   * - if `disableModernSassCompiler` is enabled, the module will configure the legacy SASS compiler.
+   * - if `sass-embedded` dependency is installed, the module will configure the modern SASS compiler.
+   * - otherwise, the module will configure the modern SASS API and will enable [preprocessorMaxWorkers](https://vitejs.dev/config/shared-options.html#css-preprocessormaxworkers), only if not configured from user land.
+   *
+   * @https://vitejs.dev/config/shared-options.html#css-preprocessoroptions
+   * @see https://vitejs.dev/config/shared-options.html#css-preprocessormaxworkers
    *
-   * @see https://github.com/vuetifyjs/nuxt-module/pull/213
    * @default false
+   * @deprecated Vite 7 supports only the modern SASS compiler and API.
    */
-  disableVuetifyStyles?: boolean
+  disableModernSassCompiler?: boolean
   /**
    * Add Vuetify Vite Plugin `transformAssetsUrls`?
    *

packages/vuetify-nuxt-module/src/utils/configure-vite.ts

@@ -2,6 +2,8 @@ import type { Nuxt } from '@nuxt/schema'
 import type { ObjectImportPluginOptions } from '@vuetify/loader-shared'
 import type { VuetifyNuxtContext } from './config'
 import defu from 'defu'
+import { isPackageExists } from 'local-pkg'
+import semver from 'semver'
 import { vuetifyConfigurationPlugin } from '../vite/vuetify-configuration-plugin'
 import { vuetifyDateConfigurationPlugin } from '../vite/vuetify-date-configuration-plugin'
 import { vuetifyIconsPlugin } from '../vite/vuetify-icons-configuration-plugin'
@@ -16,6 +18,32 @@ export function configureVite (configKey: string, nuxt: Nuxt, ctx: VuetifyNuxtCo
     viteInlineConfig.plugins = viteInlineConfig.plugins || []
     checkVuetifyPlugins(viteInlineConfig)
 
+    if (!ctx.moduleOptions.disableModernSassCompiler) {
+      // vite version >= 5.4.0 && < 7.0.0
+      const enableModernSassCompiler = semver.gte(ctx.viteVersion, '5.4.0') && semver.lt(ctx.viteVersion, '7.0.0-0')
+      if (enableModernSassCompiler) {
+        const sassEmbedded = isPackageExists('sass-embedded')
+        if (sassEmbedded) {
+          viteInlineConfig.css ??= {}
+          viteInlineConfig.css.preprocessorOptions ??= {}
+          viteInlineConfig.css.preprocessorOptions.sass ??= {}
+          viteInlineConfig.css.preprocessorOptions.sass.api = 'modern-compiler'
+          viteInlineConfig.css.preprocessorOptions.scss ??= {}
+          viteInlineConfig.css.preprocessorOptions.scss.api = 'modern-compiler'
+        } else {
+          viteInlineConfig.css ??= {}
+          viteInlineConfig.css.preprocessorOptions ??= {}
+          viteInlineConfig.css.preprocessorOptions.sass ??= {}
+          viteInlineConfig.css.preprocessorOptions.sass.api = 'modern'
+          viteInlineConfig.css.preprocessorOptions.scss ??= {}
+          viteInlineConfig.css.preprocessorOptions.scss.api = 'modern'
+          if (!('preprocessorMaxWorkers' in viteInlineConfig.css)) {
+            viteInlineConfig.css.preprocessorMaxWorkers = true
+          }
+        }
+      }
+    }
+
     viteInlineConfig.optimizeDeps = defu(viteInlineConfig.optimizeDeps, { exclude: ['vuetify'] })
 
     if (ctx.isSSR) {