How to change breakpoints in the scss in vuetify v2?

So look at the documentation: https://vuetifyjs.com/en/customization/sass-variables/#vue-cli-install, it says:

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

That is, after we have created the project using the Vue CLI, we manually:

1. Сreate the new sass folder in our src folder.
2. Next, in our new sass folder, create the new variables.scss file.
3. Next, in our new variables.scss file, write these lines, these are the standard settings for bootstrap-4:

*

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

4. Now restart npm run serve and you are ready. You can change the values in the $grid-breakpoints variable to your own.

For version 2.0 you have to change the SASS variables by creating a custom SASS file which you import into your vue.config.js file: https://vuetifyjs.com/en/customization/sass-variables.

For the SASS variables to be available globally, you can to first

// src/sass/main.scss
@import '~vuetify/src/styles/styles.sass';

// You need to map-merge your new SASS variables
$grid-breakpoints: map-merge($grid-breakpoints, (
  xs: 0,
  sm: 476px,
  md: 668px,
  lg: 1000px,
  xl: 1300px
))

And then have your config file import the variable globally:

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`,
      },
    },
  },
}

You also have to specify your custom breakpoints when you specify Vuetify options: https://vuetifyjs.com/en/customization/breakpoints

//import this into your main.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  breakpoint: {
    thresholds: {
       xs: 0,
       sm: 476,
       md: 668,
       lg: 1000,
       xl: 1300
    }
  }
})