Tips for adjusting breakpoints in the SCSS of Vuetify version 2?

Question

Tips for adjusting breakpoints in the SCSS of Vuetify version 2?

I am currently using scss files and I want to adjust the breakpoints within the css code in vuetify version 2.

Unfortunately, I have not been able to locate any information regarding this in the vuetify upgrade guide.

In the previous version 1.5, I utilized style-x.styl for this purpose:

$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';

After defining these styles, I proceed to import the file:

import '../style-x.styl';
...
Vue.use(Vuetify);
...

css vue.js sass vuetify.js

Answer 1

Answer №1

If you want to customize your Vuetify project, make sure to check out the documentation at https://vuetifyjs.com/en/customization/sass-variables/#vue-cli-install. According to the guidelines:

After installation, create a folder named sass, scss, or styles in the src directory with a file called variables.scss or variables.sass

Once you have created your project using Vue CLI, here is what you need to do manually:

Create a new sass folder inside the src directory.
In the newly created sass folder, add a file named variables.scss.
In the variables.scss file, include the following lines which define the standard settings for bootstrap-4:

*

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

Now restart npm run serve and your changes will be applied. Feel free to adjust the values in the $grid-breakpoints variable according to your needs.

Answer 2

If you want to customize your Vuetify project, make sure to check out the documentation at https://vuetifyjs.com/en/customization/sass-variables/#vue-cli-install. According to the guidelines:

After installation, create a folder named sass, scss, or styles in the src directory with a file called variables.scss or variables.sass

Once you have created your project using Vue CLI, here is what you need to do manually:

Create a new sass folder inside the src directory.
In the newly created sass folder, add a file named variables.scss.
In the variables.scss file, include the following lines which define the standard settings for bootstrap-4:

*

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

Now restart npm run serve and your changes will be applied. Feel free to adjust the values in the $grid-breakpoints variable according to your needs.

Answer 3

Answer №2

To implement version 2.0, you must make changes to the SASS variables by creating a custom SASS file that you import into your vue.config.js file. You can find detailed instructions on how to do this at https://vuetifyjs.com/en/customization/sass-variables.

In order for the SASS variables to be accessible globally, follow these steps:

// src/sass/main.scss
@import '~vuetify/src/styles/styles.sass';

// Merge your new SASS variables with the existing ones
$grid-breakpoints: map-merge($grid-breakpoints, (
  xs: 0,
  sm: 476px,
  md: 668px,
  lg: 1000px,
  xl: 1300px
))

Next, ensure that your config file imports the variable globally:

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`,
      },
    },
  },
}

Don't forget to define your custom breakpoints when setting Vuetify options as well: 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
    }
  }
})

Answer 4

To implement version 2.0, you must make changes to the SASS variables by creating a custom SASS file that you import into your vue.config.js file. You can find detailed instructions on how to do this at https://vuetifyjs.com/en/customization/sass-variables.

In order for the SASS variables to be accessible globally, follow these steps:

// src/sass/main.scss
@import '~vuetify/src/styles/styles.sass';

// Merge your new SASS variables with the existing ones
$grid-breakpoints: map-merge($grid-breakpoints, (
  xs: 0,
  sm: 476px,
  md: 668px,
  lg: 1000px,
  xl: 1300px
))

Next, ensure that your config file imports the variable globally:

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`,
      },
    },
  },
}

Don't forget to define your custom breakpoints when setting Vuetify options as well: 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
    }
  }
})

Tips for adjusting breakpoints in the SCSS of Vuetify version 2?

Answer №1

Answer №2

Similar questions

What's the contrast between parameters and queries in the Vue router?

After clicking on the About page in Vue, my data seems to vanish into thin air

The HTML and CSS code I wrote functions perfectly on Codepen, but for some reason, it appears different when I view it in my Chrome environment

"Troubleshooting an issue with post requests in VueJS and Laravel resulting in

How can Vue.js transfer form data values (using v-model) from a Parent component to a Child component?

Getting rid of unnecessary compiled CSS files in Compass

Creating a new array in Vue.js by filtering the results of a promise iteration

Why am I unable to access the most up-to-date release of postcss?

Removing items in vue.js

V-Stepper Slot Header in Vuetify 3 - Elevate Your Stepper

Having trouble with integrating jsPlumb with Nuxtjs and encountering the error "document is not defined"?

Rendering lists in Vuejs2 with computed properties for filtering

Differences in React projects utilizing materialize-css compared to those using react-toolbox or material-ui

What is the correct way to reset the styling of a web browser element, such as a <button>?

What steps should be taken to acquire the most recent CSS files for a theme?

Develop your website layout with Flexbox (Bootstrap 4.2), using stacked grid designs similar to the float: left method

Personalized color scheme for calendar td

What is the best way to add a gradient effect to my image? (link)

navigating between html pages using sliding next and previous buttons

Struggling to eliminate the scrollbar on a Material UI Dialog