Vuetify: [Documentation] The import needs to be after the variables

[MrJmpl3]

Environment

Browsers: Chrome 75.0.3770.142
OS: Windows 10

Steps to reproduce

```scss
$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

[OstapL]

@MrJmpl3 did you find solutions?

[MrJmpl3]

Solutions? , The unique problem is the documentation , the documentation is bad.

For stylus , you can need after the import , but for SASS you need override before the import

[OstapL]

@MrJmpl3 yes, I was trying to do it

$btn-border-radius: 0px;
@import '~vuetify/src/styles/main.sass';

but it's not working for me

[KaelWD]

I don't think it was an intentional change but it only works with a-la-carte now, main.sass doesn't import any components.

[pscheit]

Keep in mind many of the Vuetify variables are using SASS Lists and must be updated with map-merge as demonstrated below:

https://vuetifyjs.com/en/customization/sass-variables

e.g. for the breakpoints you have to use map-merge() to change them

[angelpcadena]

I still can't override the default variables the way it's showed in the documentation, one thing I tried and sort of worked, was defining the overrides for the core defaults (font-family, font-size etc) and then importing ~vuetify/src/styles/main.sass instead of ~vuetify/src/styles/styles.sass, but the compilation time is excessive, must be because it's importing and compiling all vuetify components' stylesheets.

[johnleider]

I understand that this is confusing and is something I will be adding to the vue-cli-plugin very soon so this can be automated for users and all that is required is a main.sass file.

[MrJmpl3]

I still can't override the default variables the way it's showed in the documentation, one thing I tried and sort of worked, was defining the overrides for the core defaults (font-family, font-size etc) and then importing ~vuetify/src/styles/main.sass instead of ~vuetify/src/styles/styles.sass, but the compilation time is excessive, must be because it's importing and compiling all vuetify components' stylesheets.

I have a good practice:

I use a only file named _variables.scss to the data options in the sass-loader, never put or import CSS inside this file. Because if I put CSS , this CSS inject in all CSS files processed.

Like: https://github.com/MrJmpl3/vuetify-material-dashboard/tree/modified-version

PD: If the link don't work in the future is because i will rename the branch

[chuoke]

I got solution in my project for now, that is Enable extract CSS option.

laravel-mix:

mix.options({
    extractVueStyles: true,
    globalVueStyles: 'resources/sass/vuetify/variables.sass'
})  

nuxtjs:

{ 
   build: { 
       extractCSS: true 
   }
} 

[MrJmpl3]

I got solution in my project for now, that is Enable extract CSS option.

laravel-mix:

mix.options({
    extractVueStyles: true,
    globalVueStyles: 'resources/sass/vuetify/variables.sass'
})  

nuxtjs:

{ 
   build: { 
       extractCSS: true 
   }
} 

But, what is your problem? Because Vuetify Styles and import and override variables like font name , font-weight , etc , work perfect for me

[chuoke]

@MrJmpl3 yes, but $grid-breakpoints can't override

[MrJmpl3]

@MrJmpl3 yes, but $grid-breakpoints can't override

I override breakpoint without problems

[chuoke]

@MrJmpl3

I override breakpoint without problems

How to do? I configured it according to the doc, override all vars except for breakpoints.

[hereiscasio]

hum,

yes, I can override $grid-breakpoints

but i still can't see the effect on my UI

and i think i already try almost the solutions on internet . . .

after i took 2 - 3 hr to try to solve this issue

it still not work ❗️

please see below steps

vue.config.js

...
module.exports = {
     css: {
           loaderOptions: {
                 scss: {
                       data: `@import "@/sass/variables.scss";`
                 }
           }
     }
}
...

src > sass > variables.scss

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

$grid-breakpoints: (
        'xs': 514px,
    'sm': 768px
);

App.vue

<template>
    <v-row>
        <v-col cols='auto'>
              ...
        </v-col>
        <v-col cols='12' :sm='true'>
              ...
        </v-col>
    </v-row>
</template>
<style lang='scss' scoped>
     @debug $grid-breakpoints;  // overriding works ❗️
</style>

Render Result

i can see Vuetify render something like
<div data-v-6b01f496="" class="pa-0 col-sm col-12">

BUT !!!

when i touch breakpoint of "sm",
i still can see Vuetify use below css
( where "600px" is still equal to Vuetify default )

@media (min-width: 600px)
.col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

could somebody give me a help ?
i almost crazy right now
@MrJmpl3

[MrJmpl3]

Can you create a repo with your settings ? to clone and see what is the problem

[johnleider]

The documentation has been updated and the most recent v2.1.5 properly reflects this.

[tvld]

@hereiscasio Did you ever solve this? Issue is still there and documentation as @johnleider referred to is faulty or missing something it seems...

[DimosthenisK]

@hereiscasio I did it like this on the nuxt module (not sure if related)

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

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

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

EDIT: See my updated reply: https://github.com/vuetifyjs/vuetify/issues/8134#issuecomment-690108840

[hereiscasio]

sorry for late reply, due to project time constraint,
i need to use dirty hack to workaround it,

i might try it again recently
at now, i think using @use might be a life saver, but i haven't give it a try

@DimosthenisK thx, i will try

[ITsolution-git]

I cannot override vuetify sass/scss default variables.
No solutions here works.
Anyone has sorted it out?

Thank you.

[DimosthenisK]

My solutuon definitely works for me right now.

[MrJmpl3]

But, think this problem was fixed, only copy the example from the documentation.

[hereiscasio]

@DimosthenisK

One year later
i finally use Nuxt with Vuetify
and i want to override breakpoint again

i did study on both Vuetify official doc + Nuxt Vuetify Module doc
and i try your solution
all of them are _JUST NOT WORK_ ❗️

So i really quite confused how can you make it works❓

I have a file which is _assets/variables.scss_
its content are just the same as you presented solution

and that file is imported in _nuxt.config.js_ as shown below

export default {
...
  vuetify: {
    customVariables: ['~/assets/variables.scss']
    ...
  },
...
}

My test file is _pages/index.vue_

i.e. you can see the breakpoint is sm as show below

<template>
  <v-app>
    <v-container class="grey lighten-5">
      <v-row no-gutters>
        <v-col  v-for="n in 3" :key="n" cols="12" sm="4">
          <v-card class="pa-2" outlined tile> card </v-card>          
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
export default {}
</script>

[DimosthenisK]

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

[hereiscasio]

@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 ❗️