Overriding Vuetify breakpoints using variables.scss, works but causes other css styles to break

I’m trying to override vuetify grid breakpoints using variables.scss, it works but then other css styles are missing, such as justify and align on v-row. I then imported main.sass in the variables file, which fixed justify and align but that causes 5 mins build time and now other styles no longer work, such as cols on v-col. Also the hot reload is extremely slow now.

I have this in variables.scss

@import "~vuetify/src/styles/main.sass";  $grid-breakpoints: map-merge($grid-breakpoints,         (           'xs': 0px,           'sm': 460px,           'md': 750px,           'lg': 1264px,           'xl': 1904px,         ) ); 

and also added the breakpoints in vuetify.js

import Vue from 'vue'; import Vuetify from 'vuetify/lib';  Vue.use(Vuetify);  export default new Vuetify({   breakpoint: {     thresholds: {       xs: 460,       sm: 750,       md: 1264,       lg: 1904     },   }, }); 

I would really like to get this to work, because I don’t like the breakpoints set by vuetify, and there may be other things I would like to override, such as default colors in the vuetify color theme.

Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.