Conflict in order with mini-css-extract-plugin (i know,the question have already been asked several time :-/)

[fatoldsun00]

Hi community, i need your help !

Stack

• Electron, electron-webpack, vuejs (vue-loader / vue-router)

• CSS are in .vue directly, into a <style lang="scss">, so if i read doc correctly it's vue-loader who manage lang="scss"

The problem

I had a probleme with mini-css-extract plugin : like many people i get a "conflict order warning". I read a lot and the best way to solve it, it's to re-order css (and so .vue child import into parent .vue).

But i stuck :

• I tried to ignore the order with ignoreOrder option of mini-css-extract plugin, but it no longer seems avalaible in webpack 4.
• I tired to ignore error with webpack config ( stats.warningFilter ) but i'm a neewby with webpack... So the magick behin electron-webpack stuck me
• I tried to reorder css, because each css style is into a <style lang="scss"> in .vue file, the only thing i can do it's to change order of .vue import... But when i add a component in a child component of my main component i have order warning again.

I read that not add scoped or module into <style> is not a good practice, but when i had scoped or module it does not change anything.

It's drive me crazy, i don't understand where the order of the component is in conflict. I can give snippet if it's usefull for somebody but app is large and not i'm not sure that i can reproduce error

Thank for any help

[fatoldsun00]

After many hour of investigation, it seems that vue-router, when we load components at the fly with "component: () => import('../main.vue')" break mini-css order. If i load main.vue at the top of the script, with an import no problem ! But it's to me a real problem to load all .vue at the top of the script : loading of the app take several second longer.

[alexander-akait]

Sorry I can't help, you don't fill out the issue template, so I don't know your version, your configuration, how I can reproduce it or other information, if you need help please fill out all fields in the issue template and I will help, yes order can be changed in some rare cases, but I can't say you why, because I don't see your code

[fatoldsun00]

Thanks for anwser.

The problem was between chair and keyboard, like always.

If anyone who use electron-webpack / vue-loader / vue-router face this problem : you need to grab all css chunk into one, otherwise webpack do a chunck per route and you can get the "conflict warning order".

You can configure webpack in this way :

module.exports = {
  ... Webpackconfig,
  optimization: {
    ...optimization config
    splitChunks: {
      cacheGroups: {
        default: false,
        // Merge all the CSS into one file (need to avoid mini-css-extra conflict order witch vue-router)
        styles: {
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    },
  },
};

You can also modify your router in this way (/* webpackChunkName: "app" */)

export default [
  {
    path: '/installer',
    name: 'installer',
    component: () => import(/* webpackChunkName: "app" */ '../installer.vue'),
  },
  {
    path: '/',
    component: () => import(/* webpackChunkName: "app" */ '../main.vue'),
  }];

But this way you grab js and css into a single file, loosing advantages of dynamic load and performance are downgrade

@evilebottnawi : can you let me know if i'm right ? this solution seems to walk like a charm but it's the right way ?

thanks again for your previously answer !

[alexander-akait]

@evilebottnawi : can you let me know if i'm right ? this solution seems to walk like a charm but it's the right way ?

I think yes, it doesn't look bad

[fatoldsun00]

Thanks master ;)