@paro-paro/vite-plugin-vuetify-sass

Copy of vite-plugin-vuetify 's internal style plugin with a few tweaks.

Meant to be used in Nuxt applications with SSR enabled.

For more detailed info, check the vuetify documentation, specially the SASS and treeshaking sections.

You can also check this (in)famous issue for context.

Be noted that, if you are not using Nuxt, it is recommended that you use the original vite-plugin-vuetify.

Install

Use your favorite package manager.

pnpm add -D @paro-paro/vite-plugin-vuetify-sass

Vuetify v3.0.0 (or above) and Vite v3.1 (or above) are required. Vite 5.x is also supported.

Usage

settings.scss

@use 'vuetify/settings' with (
  $reset: false,
  $utilities: false,
  $button-height: 100px,
  $button-border-radius: 50px
);

Vue

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import vuetifySass from '@paro-paro/vite-plugin-vuetify-sass'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }), // do not pass the 'styles' option
    vuetifySass({ configFile: 'src/assets/settings.scss' }),
  ],
})

Nuxt

nuxt.config.ts

import vuetify from 'vite-plugin-vuetify'
import vuetifySass from '@paro-paro/vite-plugin-vuetify-sass'

export default defineNuxtConfig({
  ssr: true,
  build: {
    transpile: ['vuetify'], // when ssr is enabled
  },
  experimental: {
    inlineSSRStyles: false, // for production build
  },
  hooks: {
    'vite:extendConfig': (config) => {
      config.plugins!.push(
        vuetify({ autoImport: true }), // do not pass the 'styles' option
        vuetifySass({
          configFile: 'assets/settings.scss',
        }),
      )
    },
  },
})

Note

This plugin does not include any auto-import or treeshaking functionality. For that, you still need to use the original vite-plugin-vuetify (as shown in the usage section). Just make sure that you do not pass the styles option to the plugin. This way, only the internal import plugin (for treeshaking) will be used.

SASS compilation

Currently, there are several open issues and discussions around the slow performance of SASS compilation with Vite. Despite this, I have not experienced a significant performance hit when using this plugin in a Vite + Vue + Vuetify application.

The big performance hit seems to be a Nuxt specific issue and heavily affects the DX with a very slow warm up time (dev server) when compiling SASS files.

Update: Latest Nuxt 3.8.1 and 3.8.2 versions seem to have addressed this issue and the warm up time has being reduced significantly. Check #1 for details.

License

MIT License © 2023-PRESENT Antonio Parody