10

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);
...

2 Answers 2

12

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.
1
  • 2
    This one works as it says in the documentation. no need to touch the vue.config.js file.
    – Mel
    Commented Apr 16, 2020 at 13:13
10

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
    }
  }
})
4
  • Ok - I've added to my response to clarify the scss part.
    – Cathy Ha
    Commented Aug 2, 2019 at 22:10
  • Oops! Tiny mistake. It should be $grid-breakpoints:, with a colon not an equal sign.
    – Cathy Ha
    Commented Aug 2, 2019 at 22:51
  • thresholds shouldnt have px after the numbers
    – zardilior
    Commented Oct 11, 2019 at 5:36
  • 2
    Does not work. I get an error message that data is an invalid option.
    – pinki
    Commented Feb 20, 2020 at 10:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.