vuetify-loader: [@vuetify/vite-plugin] Unable to override some of the variables

When using vite-plugin 1.0.0-alpha.3 with vuetify 3.0.0-alpha.11 and trying to override variables, some of them don’t seem to work (change is not applied) e.g.

@use 'vuetify/styles' with (
  $body-font-family: 'monospace', // this works fine
  $typography: ( // as well as this
    'h1': (
      'size': 1rem,
      'weight': 900,
      'line-height': 1rem,
      'letter-spacing': -.015625em,
      'text-transform': none
    ),
  ),
  $grid-breakpoints: ( // this doesn't work
    'xs': 0,
    'sm': 1000px,
    'md': 1200px,
    'lg': 1400px,
    'xl': 1600px,
    'xxl': 1800px,
  ),
  $container-max-widths: ( // nor does this
    'md': 1199px,
    'lg': 1399px,
    'xl': 1599px,
    'xxl': 1799px,
  ),
);

working $body-font-family:

not working breakpoints:

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 29 (6 by maintainers)

Commits related to this issue

Possible fix of error while building production release might be fixing #204 — committed to lukeromanowicz/vuetify-loader by lukeromanowicz 3 years ago
fix: add leading slash to absolute paths on windows fixes #204 — committed to vuetifyjs/vuetify-loader by KaelWD 3 years ago
fix: add leading slash to absolute paths on windows fixes #204 — committed to vuetifyjs/vuetify-loader by KaelWD 3 years ago

Most upvoted comments

There was a vite bug: https://github.com/vitejs/vite/issues/4957

There’s also #206 which I’m looking into

KaelWD on Sep 24, 2021

Hello, I’m reopening that discussion, because I still experience some issues. Here is my setup:

// main.scss
@use 'vuetify/styles' with (
  $typography: (
    'button': (
      'text-transform': none
    ),
  )
);

// vuetify.js
import '../main.scss';
import { createVuetify } from 'vuetify';
export default createVuetify({});

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from '@vuetify/vite-plugin';

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ styles: 'expose' })
  ],
});

My buttons are not written with the regular case. The .v-btn still contains text-transform: uppercase. The only workaround I found at the moment, is to manually add the .sass file of the component:

// main.scss
@use 'vuetify/lib/components/VBtn/VBtn';

Am I missing something, or is it a bug? Let me know for more details. Vuetify v3.0.0-alpha.11, Vue v3.2.6 and Vite plugin v1.0.0-alpha.4.

BreizhReloaded on Oct 7, 2021

You can install vuetify@npm:@vuetify/nightly@next to use the latest build through npm.

KaelWD on Sep 17, 2021

@KaelWD I confirm that it’s working great on latest, non-published vuetify

lukeromanowicz on Sep 17, 2021

This might not work properly with the current alpha, it works for me in the vuetify-loader dev environment with the vuetify next branch symlinked.

KaelWD on Sep 16, 2021