Vuetify: [Bug Report] vuetify-loader changes order of CSS during build

[MartinMuzatko]

Versions and Environment

Vuetify: 1.5.16
Vue: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Windows 10, Linux

Steps to reproduce

Add any other source of CSS

Expected Behavior

Vuetify should add their CSS before other CSS or at least allow to define where the vuetify-loader places the components.

Actual Behavior

Vuetify places their auto-discovered components always last, making it impossible to naturally override CSS.

Reproduction Link

Not sure if I am able to reproduce this, becasue codesandbox always runs in dev mode.
The problem is that dev mode and prod are looking different.
https://codesandbox.io/s/codesandbox-nuxt-q2ogg

Related links:

https://stackoverflow.com/questions/56665934/nuxt-vuetify-how-to-control-the-order-in-which-css-files-are-loaded
https://stackoverflow.com/questions/43574567/order-of-imported-css-file-in-component-vuejs

[KaelWD]

We don't specify any order, it's dependant on the build configuration.

Related:

• #3583
• https://github.com/vuetifyjs/vuetify/issues/5271
• webpack-contrib/mini-css-extract-plugin#188,
• https://webpack.js.org/loaders/style-loader/#insertat
• https://stackoverflow.com/questions/37021225/webpack-build-css-rules-have-different-order-then-in-development
• https://github.com/vuejs/vue-loader/issues/521
• https://github.com/vuejs/vue-loader/issues/808

[MrJmpl3]

You need see the order of the imports , for example: I had problem with the footer , my imports was:

import Sidebar from '@/components/organisms/Sidebar.vue';
import Toolbar from '@/components/organisms/Toolbar.vue';
import Footer from '@/components/organisms/Footer.vue';

The styles of AppBard (extends of Sheet) replace the Footer , I solved:

import Sidebar from '@/components/organisms/Sidebar.vue';
import Footer from '@/components/organisms/Footer.vue';
import Toolbar from '@/components/organisms/Toolbar.vue';

[MartinMuzatko]

This does not work, because the components identified by veautify-loader inject themselves after all other loaded CSS.

[MrJmpl3]

The example is broken, can you create a new example of the problem for help?

[MartinMuzatko]

will do

[Mioleris]

Is there any solution for this?
In dev mode vuetify style is loaded last in head part.
And all component styles are loaded before that.

After a build css files has at first vuetify css and then my component styles.

How can I keep order or change that after build that vuetify styles will be last in css file ?

vue-cli-service build --target lib --name my-lib src/index.js

Vue cfg has extract: true