Breakpoints related SASS variables doesn't seem to be taken into account when container related SASS variables are defined

Question

I'm trying to override Vuetify $container-max-widths. This is what Vuetify does

$container-max-widths: () !default;
$container-max-widths: map-deep-merge(
  (
    'xs': null,
    'sm': null,
    'md': map.get($grid-breakpoints, 'md') * 0.9375,
    'lg': map.get($grid-breakpoints, 'lg') * 0.9375,
    'xl': map.get($grid-breakpoints, 'xl') * 0.9375,
    'xxl': map.get($grid-breakpoints, 'xxl') * 0.9375,
  ),
  $container-max-widths
);

I figured out that to override $container-max-widths first I have to override $grid-breakpoints, therefore I did this

// src/styles/main.scss

@use "vuetify" with (
  $grid-breakpoints: (
    "md": 960px,
    "lg": 960px,
    "xl": 960px,
    "xxl": 960px
  )
);

I basically want the same value from md and up. Then I used the v-container to check if the max-widths were properly updated, but it didn't seem to work. You can find a code sandbox here. What am I doing wrong?

Answer 1

vuetify style import cannot override component styles because they were already imported with default global variables when a component was imported. This can be seen by disabling vuetify style import. Vuetify allows to override component styles through build-time transforms rather than providing module structure that could make these styles optional.

As shown in the documentation, this configuration is required:

configFile will be resolved relative to the project root, and loaded before each of vuetify’s stylesheets.

vite.config.js

import vuetify from 'vite-plugin-vuetify';
...
plugins: [
  ...
  vuetify({
    styles: { configFile: 'src/styles/settings.scss' }
  })

settings.scss

@use 'vuetify/settings' with (
  $grid-breakpoints: (
    'md': 960px,
    'lg': 960px,
    'xl': 960px,
    'xxl': 960px,
  )
);