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);
...
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:
*
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
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
}
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With