Nuxt.js项目中使用Vuetify $display-breakpoints变量报错求助

Ah, I’ve run into this exact snag before—Vuetify’s Stylus variable structure can be counterintuitive, especially when paired with Nuxt. Let’s break down why this error pops up and how to fix it.

Why the Error Happens #

The $display-breakpoints variable in Vuetify doesn’t have a direct .sm-and-up property. That "and-up" syntax is part of Vuetify’s pre-built breakpoint mixins, not the raw variable object itself. The $display-breakpoints object stores each breakpoint’s min/max pixel values (like $display-breakpoints.sm.min for the small breakpoint’s minimum width), not ready-to-use media query strings.

On top of that, in Nuxt.js, you need to ensure Vuetify’s Stylus variables are properly imported either per-component or globally so they’re accessible in your styles.

Solution 1: Use Vuetify’s Breakpoint Mixins (Recommended) #

Vuetify provides clean, built-in Stylus mixins for handling breakpoints. Here’s how to implement this in your component:

<style lang="stylus">
// First import Vuetify's core variables and breakpoint mixins
@import '~vuetify/src/stylus/settings/_variables'
@import '~vuetify/src/stylus/mixins/_breakpoints'

.submit-container
  // Use the pre-made mixin for "sm and up" breakpoints
  @media-breakpoint-up(sm)
    font-size 5em
</style>

This mixin automatically generates the correct media query (e.g., @media (min-width: 600px) for sm in Vuetify 2.x) using Vuetify’s default breakpoint values.

Solution 2: Manually Use Breakpoint Variable Values #

If you prefer writing the media query yourself, you can directly access the min-width value from the $display-breakpoints object:

<style lang="stylus">
@import '~vuetify/src/stylus/settings/_variables'

.submit-container
  @media (min-width: $display-breakpoints.sm.min)
    font-size 5em
</style>

This achieves the same result as the mixin, just with a bit more manual code.

Solution 3: Global Configuration (Avoid Repeating Imports) #

To skip importing Vuetify’s Stylus files in every component, set up global imports in your Nuxt config:

1. Create a global Stylus file (e.g., assets/styles/global.styl) with the core imports:

@import '~vuetify/src/stylus/settings/_variables'
@import '~vuetify/src/stylus/mixins/_breakpoints'

2. Update your nuxt.config.js to load this file globally:

export default {
  css: [
    '~/assets/styles/global.styl'
  ],
  vuetify: {
    // Optional: Add this if you want to override default Vuetify variables
    customVariables: ['~/assets/styles/custom-variables.styl']
  }
}

Now you can use Vuetify’s variables and mixins in any component without re-importing them each time.

Quick Version Check #

Just a heads-up: The examples above work for Vuetify 2.x. If you’re on Vuetify 3+, note that it uses Sass instead of Stylus—you’ll need to adjust to using @use 'vuetify/settings' and @include breakpoint-up('sm') instead.

内容的提问来源于stack exchange，提问作者Victor P