[Vuetify x Vite] Use overriden Vuetify variables globally

[Doltario]

Hi everyone,

First of all I am sorry if I did not post in the right place or platform. It is related to vuetify but I genuinely think it is my vite configuration that fails. I also tried to find the answer on this forum but I did not end up to any conclusion.

I’m encountering issues trying to pass to Vite (From VueCLI).

Some context first. On a project I am working on, I wanted to prepare a transition to vue3 by upgrading to Vue2.7 (from 2.6) and introduce Vite.
I also use Vuetify and bumped it to 2.6.12.

As I said, the thing I encountered is related to Vuetify:
I used @vitejs/plugin-vue2 and unplugin-vue-components packages to ensure the compatibility between Vue2 and Vite. The application’s logic works fine, but the style is broken because it seems that Vuetify variables overrides defined in src/style/variables.scss are not used in my scss files.

I know that with Webpack, Vuetify requires to import ./node_modules/vuetify/src/styles/styles.sass in the scss in which we want to use the variable. But the additionalData we have in vite.config.js should make that useless. Plus it would output Vuetify’s variables, with none of my overrides.

It is as if the files I put in additionalData are not prepend to main.scss, or any scss files in my styles folder. Maybe I didn’t understand well what additionalData does. I must be missing something but I am clueless, I would really use your help on that one.

For an exemple, I forked a clean stackblitz (https://stackblitz.com/edit/vite-vuetify-global-scss-vars) and used my version in package.json + reproduced the behaviour. Here is the link : https://stackblitz.com/edit/vite-vuetify-global-scss-vars-v5adc8

In this fork I tried to override some Vuetify variables. And added a main.scss file in which I wanted to access to some Vuetify variables I have overridden. I imported this file in my app.vue.

I also tried to access to the same variable from a component (NestedComponent) but it does print the same error : “Undefined variable”

(I know I did break the icons but this is not what I’m focused on)

Thanks in advance for your help,
I stay alert if you need any further information.

[userquin]

@Doltario I'm using same approach (Vite + Vue 2.6 + Vuetify 2 + VuetifyResolver (unplugin-auto-import) + vue-demi + script setup + Pinia + unplugin pages + UnoCSS icons preset) and I use this code to configure scss/sass variables:

// vite.config.ts
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`,
    },
    dedupe: ['vue-demi'],
  },
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: [
          // vuetify variable overrides
          '@import "@/styles/variables.scss"', // <== your vuetify variables
          '',
        ].join('\n'),
      },
    },
  },

I have this Vue plugin:

// src/plugins/vuetify.ts
import '@/styles/app.scss'

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import messages from '@/messages' // <= custom ts module with vuetify default messages

Vue.use(Vuetify)

const opts = {
  lang: {
    current: 'es-ES',
    defaultLocale: 'es-ES',
    locales: { 'es-ES': messages },
  },
  theme: {
    options: {
      customProperties: true,
    },
    dark: false,
    themes: {
      light: {
        primary: '#078930',
        accent: '#fa6400',
        secondary: '#424242',
        info: '#2196F3',
        warning: '#ffc107',
        error: '#b71c1c',
        success: '#4caf50',
      },
    },
  },
}

export default new Vuetify(opts)

[Doltario]

Hi @userquin, I did not expect an answer before monday, so thank you for the really fast answer !

I am curious on what does your variables.scss look like ? Because I did several changes to mimic your setup but I can't access vuetify variables inside my @/styles/main.scss that would be the equivalent of your @/styles/app.scss.

Like, can you access to $spacer in your @/styles/app.scss ?

Here you can find a different stackblitz with the changes I made : https://stackblitz.com/edit/vite-vuetify-global-scss-vars-e6s28h .

Thanks again for your input.

[serious-angel]

Thank you, but is it possible to not have it global but just a few Vite entrypoints or Vue components? Here's a huge project with Vite, Vue v2, and Vuetify v2, and this approach may affect numerous project parts which must not be affected at all.

Meanwhile, just a few pages must have different Vuetify breakpoints.

[Doltario]

Hey @serious-angel,
You did some archeology here 😄
I guess you can just import the files you need in the style block of the components where you need them.

something like:

    '@import "vuetify/src/styles/settings/_variables.scss"';
    '@import "path/to/your/styles/variables.scss"';

[serious-angel]

'@import "vuetify/src/styles/settings/_variables.scss"';
'@import "path/to/your/styles/variables.scss"';

Thank you very much for the response, and I am sorry!

Yes, I've tried this, of course, but there's no change. There current set, in vite.config.mjs, has just the following:

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import viteLegacyPlugin from '@vitejs/plugin-legacy';
import viteLaravelPlugin from 'laravel-vite-plugin';
import viteInspectPlugin from 'vite-plugin-inspect';

// ...

export default defineConfig({ /* ... */ });

And Vuetify elements work in general, since Vue has its attached as plugin:

import Vue from 'vue';
import Vuetify from 'vuetify';
import SomePage from '@js/app/pages/Some.vue';
// ...

Vue.use(Vuetify);

const vuetify = new Vuetify({
    lang: { /* ... */ },
    icons: { iconfont: 'fa' },

    theme: {
        dark: true,
        // ...
    },
});

new Vue({
    vuetify,
    // ...
    render: (h) => h(SomePage),
}).$mount('#app');

Yet, even with the imports with Vuetify variables, as in your example are added, no change to the variables is respected.

Just to clarify, is any plugin required like vuetify.ts from unplugin-vue-components?

[userquin]

Like, can you access to $spacer in your @/styles/app.scss ?

It should work: I don't use vuetify variables inside my scss files, I just override some styles, here my variables, app and _main:

src/styles/variables.scss

//$body-font-family: "Montserrat", sans-serif;
$font-size-root: 14px;
$color-pack: false;
$btn-font-weight: 500;
//$card-border-radius: 0;
//$card-elevation: 0;
$icon-size: 20px;
/* lists */
$list-item-dense-title-font-weight: bold;
//$list-item-dense-title-font-size: 0.9rem;
$list-dense-content-padding: 4px 0;
$icon-size-dense: 20px;
$list-dense-icon-height: 20px;
$list-dense-icon-margin: 6px;
$list-dense-min-height: 32px;
/* alerts*/
$alert-font-size: 14px;
/* tables */
$data-table-regular-header-height: 36px;
$data-table-regular-row-height: 28px;
$data-table-regular-header-font-size: 0.8rem;
$data-table-regular-row-font-size: 0.8rem;
$data-table-header-sort-badge-height: 20px;
$data-table-mobile-row-min-height: 28px;
$data-footer-font-size: 0.85rem;
$data-footer-padding: 0 8px;
$data-footer-pagination-margin-end: 0;
$data-footer-pagination-margin-start: 0;
$data-footer-select-select-margin-y: 4px;
$data-footer-select-select-margin-start: 8px;
/* toobars */
$toolbar-btn-icon-size: 20px;
$toolbar-content-padding-x: 0.5rem;
/* breadcrumbs */
$breadcrumbs-padding: 0;
$breadcrumbs-item-font-size: 17.5px;
:root {
  --dark-primary-color: #3C7742;
  //--primary-color: #4caf50;
  //--primary-color: #3C7742;
  --primary-color: #078930;
  // primary-color(0.27) over white => rgb(193, 200, 227)
  --primary-highlight-color: #DFF0D8;
  --accent-color: #fa6400;
  --accent-color-bg: rgba(255, 100, 0, 0.17);
  --accent-color-fg: var(--accent-color);
  //--accent-color: rgb(60, 119, 66);
  // accent-color(0.27) over white => rgb(255, 213, 186)
  //--highlight-color: #fa64001b;
  --highlight-color: #DFF0D8;
  //--highlight-color: rgb(255,238,228);
  //--text-primary-color: #212121;
  --text-primary-color: #ffffff;
  --normal-toolbar-primary-color: #212121;
  //--text-primary-color: rgba(33, 33, 33, 0.87);
  //--text-primary-color: white;
  --app-drawer-width: 300px;
  --app-drawer-compact-width: 256px;
  --error-color: #b71c1c;
  --error-color-fg: var(--error-color);
  --error-color-bg: #ffebee;
  --success-color: #4caf50;
  --success-color-fg: var(--success-color);
  --info-color-bg: #E3F2FD;
  --info-color-fg: #0D47A1;
  // todo@quini: buscar el color para AA contrast
  --success-color-bg: #4caf5070;
  --warning-color: #ffc107;
  --warning-color-fg: #827717;
  --warning-color-bg: #ffffe7;
  --app-bg-color: #e3e3e3;
  /* filter */
  --filter-select-width: 65px;
  --filter-column-gap: 16px;
  --label-color: #212121;
  --picker-highlight-fgcolor: #000000;
}

src/styles/app.scss

@import "main";
@import "table";
@import "highlight";
@import "error";
@import "page";
@import "crud";
@import "grid";
@import "input";
@import "filter";
@import "dialog";
@import "buttons";
@import "status";

.v-dialog.crud-dialog {
  background-color: white;
}
.v-data-table>.v-data-table__wrapper>table>tbody>tr>td,
.v-data-table>.v-data-table__wrapper>table>thead>tr>td,
.v-data-table>.v-data-table__wrapper>table>tfoot>tr>td,
.v-list-item--dense .v-list-item__title,
.v-list-item--dense .v-list-item__subtitle,
.v-list--dense .v-list-item .v-list-item__title,
.v-list--dense .v-list-item .v-list-item__subtitle,
.v-data-footer,
.v-data-footer__select .v-select__selection.v-select__selection--comma,
.v-data-table__mobile-row__header {
  font-min-size: 12px !important;
  font-size: 12px !important;
}

src/styles/_main.scss

html {
  overflow-y: auto !important;
  &.overflow-y-hidden {
    overflow-y: hidden !important;
  }
}

#app-wrapper.v-application {
  &[hidden] {
    display: none !important;
  }
  .v-list-item > .v-icon + .body-1.message-error,
  .v-list-item > .v-icon + .d-sr-only + .body-1.message-error,
  .v-list-item > .v-icon + .body-1.message-warning,
  .v-list-item > .v-icon + .d-sr-only + .body-1.message-warning,
  .v-list-item > .v-icon + .body-1.message-ok,
  .v-list-item > .v-icon + .d-sr-only + .body-1.message-ok {
    flex-grow: 1 !important;
  }
  .success--text, .error--text, .warning--text,
  .message-ok, .message-error, .message-warning {
    align-self: self-start;
    & + .d-sr-only + .body-1 {
      min-height: 32px;
      align-self: self-start;
    }
  }
}

$color-pack: false;

/* v-toolbar */
.v-toolbar.contextual {
  background-color: #dff0d8 !important;
  .v-toolbar__content {
    background-color: #dff0d8 !important;
    color: var(--v-primary-darken1) !important;
    .v-btn {
      background-color: #dff0d8 !important;
      color: var(--v-primary-darken1) !important;
      caret-color: var(--v-primary-darken1) !important;
    }
  }
}

.v-toolbar__content {
  padding: 0.25rem 1rem !important;
}
.v-toolbar.table .v-toolbar__content {
  padding: 0 1rem 0 0.5rem !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable {
  &:active,
  &:focus {
    z-index: 4;
    width: auto;
    height: auto;
    margin: 0 0 0 24px;
    overflow: visible;
    clip: auto;
    font-weight: bold;
    /*configure color to be the same as --app-header::color */
    color: var(--text-primary-color);
  }
}

[userquin]

I use Vite 2.9, this weekend I'll check some project using Vite 4.2 and Vite 4.3 beta 0: your repro on FF not working.

[Doltario]

Alright ! Then I think that my project works just like yours. Accessing to Vuetify variables inside my src/styles/main.scss is what I'm looking for.

Note: on the reproduction link, you have to uncomment line in main.scss to see the error.

EDIT : About the reproduction not working, it seems that doing npm i and then npm run dev works, I am investigating on why yarn fails to install dependencies.

[userquin]

no problem, the repro works on chrome and I checked the error: you can ask on Discord, maybe Kael or John can help you

[Doltario]

Nice !

Okey, I will do that on Monday, I'll let everybody enjoy their week-end lol.

I let this discussion open (unless I shouldn't ?) And I'll post here if there is a solution, in case anyone encounters the same situation.

Thanks for your time @userquin, have a great day !

[Doltario]

So, after some further research, it seems like Vuetify doesn't load into its components the additionalData declared in sass block. And our app's components will only load the additionalData declared in scss block.

The vite.config.js should look like:

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // This block is used by Vite to load our variables in every scss file (and SFC files)
        additionalData: [
          // vuetify variable overrides
          '@import "vuetify/src/styles/settings/_variables.scss";',
          '@import "./src/styles/variables.scss";',
          '',
        ].join('\n'),
      },
      sass: {
        // This block is used by Vuetify ONLY, to load the overrides into its components (VBtn and so on)
        additionalData: [
          // vuetify variable overrides
          '@import "vuetify/src/styles/settings/_variables.scss"',
          '@import "./src/styles/variables.scss"',
          '',
        ].join('\n'),
      },
    },
  },
  plugins: [
    vue(),
    Components({
      resolvers: [VuetifyResolver()],
    }),
  ],
})

For an example of the whole code I made a working reproduction: https://stackblitz.com/edit/vite-vuetify-global-scss-vars-kk2n8n

Disclaimer: I don't know yet the impact on the build. but this seems to be the only and cleanest solution.