[Vuejs]-How to use breakpoints in Vuetify for different screen sizes?

by

1👍

✅

So first things first:
According to the vuetify documentation the file where you want to change vuetify defaults, must be located in src/sass/variables.sass (or src/scss/variables.scss), so that the vuetify-loader is using it.

Once installed, create a folder called sass, scss or styles in your src directory with a file named variables.scss or variables.sass.

Secondly, you don’t need to touch the vue.config.js to change the vuetify defaults. To my understanding the vuetify loader is applied for anything relating vuetify directly and the scss loader in the vue.config.js is applied to all scss files in your workspace after vuetify is done. You can use prependData for your own scss globals though.

Thirdly, the scss/sass documentaion notes: 

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.merge($font-weights, ("extra-bold": 900));
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)

If both maps have the same keys, the second map’s values are used in
the map that gets returned.

So what you do, is to override your own changes by applying $grid-breakpoints as the second argument. The correct way would be: 

$grid-breakpoints: map-deep-merge(
    $grid-breakpoints,
    (
        xs: 100,
        sm: 200,
        md: 300,
        lg: 400,
        xl: 500
    )
);
👤telion

Leave a comment