How to change breakpoints in the scss in vuetify v2? - css

Question

I'm using scss files and I want to change the breakpoints in the css side in vuetify v2.
I Can't find any reference in vuetify upgrade guide for this.
In version 1.5 I did style-x.styl:
$grid-breakpoints := {
xs: 0
sm: 476px
md: 668px
lg: 1000px
xl: 1300px
}
#import '~vuetify/src/styles/styles.sass';
$material-light.background = #f5f5f5;
#import '~vuetify/src/stylus/main';
And then I import the file:
import '../style-x.styl';
...
Vue.use(Vuetify);
...

Answer 1

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:
Сreate the new sass folder in our src folder.
Next, in our new sass folder, create the new variables.scss file.
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
);
Now restart npm run serve and you are ready. You can change the values in the $grid-breakpoints variable to your own.

Answer 2

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
}
}
})