CSS is missing on PROD build

[gokhancetiner]

Module version "@nuxtjs/vuetify": "^1.12.1",

Describe the bug When I build and start my application, css seems doesn't include properly. Than I make some research the problem is occured when I put true threeShake option on vuetify options on nuxt.config.js file like below. But I make treeShake: false the custom variables doesn't read.

vuetify: { customVariables: ["~/assets/style/variable.scss"], treeShake: true, optionsPath: "./vuetify.options.js", },

For a workaround I applied solution from below link.

https://stackoverflow.com/questions/66279392/vuetify-css-missing-when-i-build-for-production.

Brieflyi solution is I added "https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" css to my project from CDN

Does anybody face a same problem ?

Many Thanks,

[larzon83]

@gokhancetiner treeShake: true is mandatory for customVariables to work. See README of this module again. Please provide a reproduction. Else, it's just guessing in the wild ;)

[gokhancetiner]

@gokhancetiner treeShake: true is mandatory for customVariables to work. See README of this module again. Please provide a reproduction. Else, it's just guessing in the wild ;)

Hi @larzon83 ,

You can use below link for reproduce the bug. The problem is, if you add $grid-breakpoints variable on the variables.scss and build the project ".align-center", ".justify-center" class doesn't find. Maybe much these are the my first impression.

https://github.com/gokhancetiner/nuxt-vuetify-bug-fix

I hope it helps.

SS with $grid-breakpoints variable build

SS without $grid-breakpoints variable build

[larzon83]

@gokhancetiner found the error: for the xs breakpoint you have to write: "xs": 0, instead of "xs": 0px, 🙈 After that, it works...

I would adwise to also update thresholds on javascript-side too. See here: https://vuetifyjs.com/en/features/breakpoints/#thresholds

Like so:

[gokhancetiner]

@gokhancetiner found the error: for the xs breakpoint you have to write: "xs": 0, instead of "xs": 0px, 🙈 After that, it works...

I would adwise to also update thresholds on javascript-side too. See here: https://vuetifyjs.com/en/features/breakpoints/#thresholds

Like so:

Thank you @larzon83. You are right the problem is 0px 🙈. I added custom grid breakpoints on my javascript side. Thank you to remind it.