[Bug] Conflicting order between styles

[Djaler]

Version and Environment
Vuetify: v1.3.0-beta.0
Vue: 2.5.17
OS: Linux

I see this warnings:

chunk cards_import~subscribers_alert [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--11-oneOf-3-1!./node_modules/postcss-loader/lib??ref--11-oneOf-3-2!./node_modules/stylus-loader??ref--11-oneOf-3-3!./node_modules/vuetify/src/stylus/components/_select.styl
 * css ./node_modules/css-loader??ref--11-oneOf-3-1!./node_modules/postcss-loader/lib??ref--11-oneOf-3-2!./node_modules/stylus-loader??ref--11-oneOf-3-3!./node_modules/vuetify/src/stylus/components/_selection-controls.styl

[KaelWD]

vuetify-loader?

[Djaler]

yes

[KaelWD]

Already tracked internally, and this is the wrong repo.

[usercao]

@KaelWD I also meet this bug when I build the project，may I ask you how this bug produce？And how to solve this problem？Thanks.

[hareku]

I have same problem.

WARNING in chunk 0 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--7-oneOf-1-1!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/stylus-loader??ref--7-oneOf-1-3!./node_modules/vuetify/src/stylus/components/_text-fields.styl
 * css ./node_modules/css-loader??ref--7-oneOf-1-1!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/stylus-loader??ref--7-oneOf-1-3!./node_modules/vuetify/src/stylus/components/_textarea.styl
 * css ./node_modules/css-loader??ref--7-oneOf-1-1!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/stylus-loader??ref--7-oneOf-1-3!./node_modules/vuetify/src/stylus/components/_cards.styl

[KaelWD]

See https://github.com/vuetifyjs/vuetify-loader/releases/tag/v1.0.3

[Djaler]

@KaelWD can you pleast suggest, how can I replace it with vue-style-loader?

[xhubert]

Same question.
Solved by importing those relative components used in pages.

I used the v-data-table in a certain page, but I didn't import it while initializing the Vuetify in plugin.

Hope it helpful.

[sinitsyn-alex]

@KaelWD can you pleast suggest, how can I replace it with vue-style-loader?
I use a-la-carte (css-loader, style-loader, stylus, stylus-loader, vuetify-loader)

[Djaler]

@KaelWD can you help us?

[ocavue]

If you are using Vue CLI v3, add the code below to vue.config.js can ignore this error.

// vue.config.js
module.exports = {
    css: {
        extract: { ignoreOrder: true },
    },
}

Make sure that you have install the latest mini-css-extract-plugin, which is a dependency of @vue/cli-service.

Check links below for more information:

• New version 0.4.2 capture lot of warnings webpack-contrib/mini-css-extract-plugin#250
• feat: Add ignoreOrder flag webpack-contrib/mini-css-extract-plugin#422
• https://cli.vuejs.org/config/#css-extract

[JohnMica]

If you are using Vue CLI v3, add the code below to vue.config.js can ignore this error.

// vue.config.js
module.exports = {
    css: {
        extract: { ignoreOrder: true },
    },
}

Make sure that you have install the latest mini-css-extract-plugin, which is a dependency of @vue/cli-service.

Check links below for more information:

• webpack-contrib/mini-css-extract-plugin#250
• webpack-contrib/mini-css-extract-plugin#422
• https://cli.vuejs.org/config/#css-extract

the only problem with this 'hack' is the order of the extracted CSS files would make the page load (on slower speed) really ugly and force the DOM to rearrange the whole thing once resources are loaded.
compute power wasted for no real reason :(

unless you guys managed to get all things sorted since this is now closed ? (I still don't have it working properly in nuxtjs with the latest release)

[Nsandomeno]

In researching this there seem to be two cases: 1 - where re-arranging nested components solves the issue and 2 - where css-loader, postcss-loader, sass-loader, and a vuetify component style sheet conflict in some way. Does order matter in both cases to the same extent? @JohnMica @Djaler have you discovered any more on this?

[JohnMica]

@Nsandomeno i haven't discovered a way to fix this totally.
My fix consisted in loading a few styles in my "global CSS" file and even if there is duplication of styles, there are only the Grid and a few other thing needed.
Haven't tried with a new project - this use buefy or no component library at all.

[m4heshd]

Reordering hundreds of nested imports manually is insane just so we can satisfy the loader (I know about the performance improvements). But yeah, reordering works. I'm sticking with ignoreOrder: true even though I'm noticing the issues @JohnMica mentioned. But I can live with that.