Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Documentation] The import needs to be after the variables

See original GitHub issue

Environment

Browsers: Chrome 75.0.3770.142 OS: Windows 10

Steps to reproduce

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

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

Expected Behavior

The breakpoint changed!

Actual Behavior

If I write like the documentation , don’t work

Reproduction Link

https://vuetifyjs.com/es-MX/customization/sass-variables

Issue Analytics

State:
Created 4 years ago
Comments:25 (3 by maintainers)

Top GitHub Comments

3reactions

hereiscasiocommented, Sep 10, 2020

@DimosthenisK I finally find the problem

the key is treeShake it only works in production if i not manually setup it to ‘true’ customVariables only work in treeShake mode

thx man really appreciate it ❗️

1reaction

DimosthenisKcommented, Sep 10, 2020

@hereiscasio You also need to set the breakpoints in the nuxt config:

vuetify: {
    treeShake: true,
    customVariables: ['~/assets/variables.scss'],
    breakpoint: {
        thresholds: {
            xs: 0,
            sm: 425,
            md: 768 + 16,
            lg: 1024 + 16
        }
    }
}

My variables.scss looks currently like this:

@import '~vuetify/src/styles/tools/_functions.sass';
@import '~vuetify/src/styles/styles.sass';

$grid-breakpoints: map-deep-merge(
    $grid-breakpoints,
    (
        'xs': 0,
        'sm': 425px,
        'md': 768px,
        'lg': 1024px,
        'xl': 1920px
    )
);

/* prettier-ignore */
$display-breakpoints: map-deep-merge(
    $display-breakpoints,
    (
        'print-only': 'only print',
        'screen-only': 'only screen',
        'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
        'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
        'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
        'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
        'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
        'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
        'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
        'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
        'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
        'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')})',
        'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'xl')})'
    )
);

@import '~vuetify/src/styles/settings/_variables';