[Bug Report] Breakpoint dont override

[MrJmpl3]

Versions and Environment

Vuetify: 1.5.7 Vue: 2.6.9 Browsers: Chrome 73.0.3683.75 OS: Windows 10

Steps to reproduce

$body-font-family = 'Muli', 'Roboto', sans-serif;
$grid-breakpoints = {
  xs: 0
  sm: 576px
  md: 768px
  lg: 992px
  xl: 1200px
};

@require '~vuetify/src/stylus/app.styl'

Expected Behavior

Working

Actual Behavior

Don't work

Reproduction Link

Cannot reproduce in Codepen

[MrJmpl3]

The problem is in the CSS , don't in the Js side , Stylus override the font family base , but the breakpoint not u.u .. I use A la Carte ,

I think A la Carte components , override the Stylus variables after my custom variable

@media only screen and (min-width: 960px) {
  .container {
    max-width: 900px;
  }
}
@media only screen and (min-width: 1264px) {
  .container {
    max-width: 1185px;
  }
}
@media only screen and (min-width: 1904px) {
  .container {
    max-width: 1785px;
  }
}
@media only screen and (max-width: 959px) {
  .container {
    padding: 16px;
  }
}

[MrJmpl3]

I solved the problem! =D

Solution:

Vue-Loader , for some reason encapsulate the imports of components in Vuetify A la carte ..

I think , and find a solution, inyect the custom variables in all import , but this is so bored and crazy manually..

Solution automatic:

Use import property in stylus-loader , but has a problem! stylus-loader has a big bug with the path.resolver in import property

Solution for the solution XD:

Use Style Resource Loader (https://github.com/yenshih/style-resources-loader) for Webpack , for Vuejs has plugin https://github.com/nguyenvanduocit/vue-cli-plugin-style-resources-loader , and for Nuxt.js dont use the Style Resource Loader , use the import property from stylus-loader , but solved the big bug in the code .. https://github.com/nuxt-community/style-resources-module

Thanks!

[tigerclaw-az]

@MrJmpl3 what does your final solution look like?? I'm having the same issue and don't understand your solution

[MrJmpl3]

@ejwaibel , It's simple

Vuetify "A la carte" import the styles in demand , but Vue loader encapsulate this styles and variables inside the import

Solution: Inyect your custom variables before in all import

How?

For Vue: https://github.com/nguyenvanduocit/vue-cli-plugin-style-resources-loader For Nuxt.js: https://github.com/nuxt-community/style-resources-module

[tigerclaw-az]

@MrJmpl3 O.M.G. I can't believe it was that simple, nor can I believe that the default doesn't work like this :-/. THANK YOU!

For anyone else coming to this thread, just follow the instructions on the style-resources-module and then remove any extra @import or @require that was being used in your main.styl file since the resources-loader is now taking care of that for you.

[MrJmpl3]

Remember , inyect only variables and mixins with style-resources-module or vue-cli-plugin-style-resources-loader

Inyect code CSS is bad , because in the compile file the code CSS is repeat in all file