CLI build production - Vuetify CSS is merged after Vue component(s) CSS

[mikekidder]

Currently the plugin is setup to inject the Vuetify import(s) after all others in main.js/main.ts file.
The Vuetify CSS is merged after the Vue component(s) styles, when you do a production build.

Ran into issue where some style elements weren't being applied to components. Its the order of things.

I resolved by shuffling the imports like so:

import Vue from 'vue'
import './registerServiceWorker'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

import App from './App.vue'

Vue.use(Vuetify)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

Having the vuetify css import anywhere before the App import resolves.
NOTE: Order is not an issue if your .vue file components style blocks are scoped.

[Juanpam]

I also had this problem. I fixed it following @mikekidder suggestions and seems to be working now. Nonetheless, it should be looked into since it is still happening so I don't really know why this was closed.

As far as I know this is not in the docs. @johnleider may you guide me in the right direction on this?

These are the packages I'm currently using:

"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuetify": "^2.2.11"

Thanks!