Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change breakpoints in the scss in vuetify v2?

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);
...
like image 697
Jon Sud Avatar asked Aug 02 '19 20:08

Jon Sud


Video Answer


2 Answers

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
);
  1. Now restart npm run serve and you are ready. You can change the values in the $grid-breakpoints variable to your own.
like image 182
Alexandr Kazakov Avatar answered Oct 18 '22 20:10

Alexandr Kazakov


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
    }
  }
})
like image 42
Cathy Ha Avatar answered Oct 18 '22 22:10

Cathy Ha