[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:

• [Bug Report] Importing stylus file causes some classes to cascade incorrectly #3583
• [Bug] Conflicting order between styles #5271
• CSS files load order mismatch in prod and dev envs 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
• Parent component could not override style of children. vuejs/vue-loader#521
• SFC style ordering vuejs/vue-loader#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

[darrenchiu]

This is still an issue, anyone can shed some light on workaround?

thanks!

[agateblue]

Im also facing this issue with my project.

Development build (yarn serve)

Production build (yarn build)

The issue

As you can notice, in the production build, buttons in the bottom navigation bar have a darker background and smaller height, which breaks the layout. I've pinpointed the issue to some CSS rules having a different order. Rules are the same but loaded in a different order, which produce unwanted side effects.

For instance, this are the background-related rules in development for those elements:

And in production:

Reproduction

I lack the time to produce a minimal reproduction setup, but you can try it with my project since it's open source:

# clone the repo and checkout a commit where the issue occurs
git clone https://code.agate.blue/agate/tempo.git
cd tempo
git checkout 5117c8796bb79e96f3c945518439a0664104e2ad

# install dependencies
yarn install

# run in dev mode then open http://localhost:8080/
# CSS rules are ordered properly
yarn serve

# run a production build, serve it and open http://localhost:8000
# CSS rules are ordered differently
yarn build
cd dist
python3 -m http.server

I'm really not familiar with Vuetify and Webpack's building internals, but I'm available to provide more context or try some stuff if needed :)