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

Question

I need your help!

Stack

• Electron, electron-webpack, vuejs

• 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 problem 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 am stuck :

• I tried to ignore the order with ignoreOrder option of mini-css-extract plugin, but it no longer seems available in webpack 4.
• I tired to ignore error with webpack config ( stats.warningFilter ) but I'm a new by 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 useful for somebody but app is large and not I'm not sure that I can reproduce error

Thank for any help

Answer 1

The problem was between chair and keyboard, like always.

If anyone who usea electron-webpack / vue-loader / vue-router facea this problem: you need to grab all css chunka into one, otherwise webpack does a chunck per route and you can get a |"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 both js and css into a single file, losing advantages of dynamic loading and performance is reduced.