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);
...
cssvue.jssassvuetify.js

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:

  1. Create a new sass folder inside the src directory.
  2. In the newly created sass folder, add a file named variables.scss.
  3. 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
);
  1. 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

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
    }
  }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Problems with CSS Printing on iOS Devices

On desktop (both Windows and Mac), the print preview displays correctly. However, on iOS devices, the full width is not shown and there is some blank space above. The issue I'm facing is that I cannot debug this problem using Browserstack. I am restr ...

cssprinting

Conquering challenges arising from organizing subdirectories for js/css/xml files

During the process of developing a website with html, css, js and xml files stored on my computer (not yet online), I initially kept all the files in one folder along with an images folder. However, as the project progressed and things started to get mes ...

javascripthtmlcssxml

Top methods for incorporating whitespace on both sides of the page

Currently working on a ReactJS/MaterialUI webapp and looking to enhance the layout. Seeking advice on whether it's best practice to add padding or margin to create space on the left and right side of the page, similar to popular websites like Stack Ov ...

cssreactjsmaterial-ui

Media query failing to adjust properly

On my website's "about" page, I'm attempting to implement a media query but encountering an issue. In the original CSS, I structured the "information" section into 2 columns with right padding to prevent the content from extending all the way to ...

htmlcsswebmedia-queriesresponsive

Having difficulties with vue installation

Whenever I take a break from using certain packages, I typically opt for fresh re-installs. However, when I recently attempted to do a fresh install of Vue.js and vue-cli by running vue init on a new project, I encountered an error stating that Vue was not ...

node.jsnpmvue.jsvuejs2

What is the best way to customize the icon-bar in react-bootstrap's Navbar?

I am trying to customize the icon-bar in a react-bootstrap's Navbar component by setting its background color to white. However, my webpack scss loader is preventing me from styling CSS classes with dashes, as it only allows camel case. This restricti ...

csstwitter-bootstrapreactjsreact-bootstrap

Obtaining Vue view parameters using the sendFile() method in Express

Currently, I am in the process of developing a Node application that incorporates Express, Vue, and ThreeJS. In terms of the backend setup with express, here is what I have implemented: const app = express(); app.post('*', (req, res) => { ...

node.jsvue.jsexpress

Ensuring text is perfectly centered within a div, regardless of its length

In the quest to center text of unknown length within a div, challenges arise. Constraints limit its size to a certain extent, making it unclear whether one or two lines will be needed. As such, traditional methods like line-height are not viable options. A ...

csshtmlpositioning

What could be causing my tabs (such as HOME, ABOUT ME..) not displaying the correct paragraph or section content?

I have set up navigation tabs on my website using anchor tags, but they are currently not linked to any specific paragraphs. I want the corresponding paragraph to be displayed when a tab is clicked, but I'm unsure how to add this functionality using j ...

javascriptjquerycsshtml

What is causing the issue with my CSS keyframe animation not functioning correctly when using `animation-direction: reverse`?

Exploring the use of animation-direction: reverse to streamline my CSS keyframe animation process. An interesting scenario arises when a container div is clicked, toggling an "active" class using jQuery to trigger the animation in either forward or backwar ...

csscss-animations

Layering digital sheets of paper and rearranging them with the help of CSS

I want to create a visual representation of a stack of paper sheets as a metaphor. The idea is to neatly stack the sheets on top of each other, with only the header of each sheet visible and the rest of the content covered. !-------------- | Sheet 1 +--- ...

jquerycss

Display a Vue.js div element based on conditions matching a specific variable value

Is it possible for Vue.js to display a div only when a defined variable is set to a specific value? Currently, v-show="variable" can be used to show the div if the variable is set. However, I would like to know if v-show="variable=5" can be implemented t ...

javascriptvue.js

The hamburger icon seems to be frozen and unresponsive

I'm struggling to get my hamburger icon to reveal the navigation bar when clicked. The icon itself functions properly and adapts to different screen sizes, but the overlay remains stationary. Check out my code on JSFiddle! <html> <head> ...

javascripthtmlcss

Ways to create intersecting borders at the corners of a division

Is there a technique to expand the borders of a div by 1 or 2 pixels in each direction so that they create a cross at each corner? https://i.stack.imgur.com/mUAxM.png ...

css

"Encountering a Javascript issue while trying to apply a CSS class to a

Encountering issues in Safari desktop / mobile and Internet Explorer. The error message states: In Safari: TypeError: Attempted to assign to readonly property. IE Edge: Assignment to read-only properties is not allowed in strict mode The problem arises ...

javascripthtmlvue.js

How can I use jQuery to slide up and slide down divs that share the same class?

Currently, I am working on creating a single-page checkout form. The challenge I am facing involves sliding up and down various divs with the same class name but different contents. To demonstrate this issue, I have prepared a sample in JSFiddle: http:// ...

jquerycss

Styling <Link> component with styled-components: A step-by-step guide

Utilizing the Link component from @material-ui/core/Link in my TypeScript code was initially successful: <Link href="#" variant="body2"> Forgot? </Link> However, I am exploring the transition to styled-components located in a separate file. ...

javascriptcssreactjstypescriptmaterial-ui

Displaying an element outside with reduced opacity using fabric js and controls placed above overlay

The property controlsAboveOverlay in Fabric.js is a boolean that, when set to true, will display the controls (borders, corners, etc.) of an object above the overlay image. The overlay image is an image that can be placed on top of the canvas. Currently, ...

javascripthtmlcssfabricjs

Express server is receiving undefined post parameters from Axios in Vue, even though they are clearly defined in Vue

Within my code, I am utilizing an <img> element as shown below: <img v-bind:word = "thing" @click="action" align="center" src="../assets/pic.png"/> Alongside, there is a method structured in this manner: ...

javascriptvue.jsexpress

Vue's push() method is replacing existing data in the array

I'm currently facing an issue where I am transferring data from a child component, Form, to its parent component, App. The data transfer is functioning correctly, however, when attempting to add this data to the existing array within the App component ...

javascriptvue.js