Closed MrJmpl3 closed 5 years ago
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;
}
}
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!
@MrJmpl3 what does your final solution look like?? I'm having the same issue and don't understand your solution
@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
@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.
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
Versions and Environment
Vuetify: 1.5.7 Vue: 2.6.9 Browsers: Chrome 73.0.3683.75 OS: Windows 10
Steps to reproduce
Expected Behavior
Working
Actual Behavior
Don't work
Reproduction Link
Cannot reproduce in Codepen