@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.

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.

Install

Use your favorite package manager.

1pnpm 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

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

Vue

vite.config.ts

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3import vuetify from 'vite-plugin-vuetify'
4import vuetifySass from '@paro-paro/vite-plugin-vuetify-sass'
5
6export default defineConfig({
7  plugins: [
8    vue(),
9    vuetify({ autoImport: true }), // do not pass the 'styles' option
10    vuetifySass({ configFile: 'src/assets/settings.scss' }),
11  ],
12})

Nuxt

nuxt.config.ts

1import vuetify from 'vite-plugin-vuetify'
2import vuetifySass from '@paro-paro/vite-plugin-vuetify-sass'
3
4export default defineNuxtConfig({
5  ssr: true,
6  build: {
7    transpile: ['vuetify'], // when ssr is enabled
8  },
9  experimental: {
10    inlineSSRStyles: false, // for production build
11  },
12  hooks: {
13    'vite:extendConfig': (config) => {
14      config.plugins!.push(
15        vuetify({ autoImport: true }), // do not pass the 'styles' option
16        vuetifySass({
17          configFile: 'assets/settings.scss',
18        }),
19      )
20    },
21  },
22})

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.

License

MIT License © 2023-PRESENT Antonio Parody