mini-css-extract-plugin: CSS files load order mismatch in prod and dev envs

Please stop writing post like same issue/same problem, if you need help please create minimum reproducible test repo

I have created a repo to demonstrate the CSS order difference between dev and prod builds. The problem isn’t related with multi-entry builds.

https://github.com/boraturant/MiniCssExtractPlugin_CSSOrderProblem

Edit: Typo on the posted images, I wrote White, it should be Green

Any solution for this? Happen the same in my project…

@yantakus please reopen this issue

this issue should not be closed

#246 But CSS Ordering is still not 💯 deterministic and likely never will be, you will get spammy warnings in case chunk1 and chunk2 imports modules in a different order, otherwise css-modules usage is encouraged to avoid issues wit ordering (e.g the CSS Cascade) altogether

I can’t offer a minimum repo, but a repo where this problem occurs (well i think at least): https://github.com/ptandler/vuepress-theme-single-page-sections you can compare the screenshots on this page I generated from the dev server with the live version at https://ptandler.github.io/vuepress-theme-single-page-sections/ which runs the build. (using @vuepress/core@^1.2.0)

See also https://stackoverflow.com/questions/58977014/how-can-i-disable-the-mini-css-extract-plugin-in-vuepress

I noticed that VuePress uses mini-css-extract-plugin@0.6.0 so I tried upgrading mini-css-extract-plugin to the current version 0.8.0, but this didn’t change anything.

@evilebottnawi I try to fix this issue，it seems to be that sort func is not correct. I test pr #236 in local, issue is sloved.

This problem is still happening to me, on all the latest versions of webpack (4.38.0) and this plugin (0.8.0)

My css is all fucked up because the order of bootstrap and my bootstrap overrides is seemingly random.

For you guys that are not having this issue - are you not splitting out CSS into separate files?

Here’s my relevant webpack config

plugins: [
    // This file is important for django to load the transpiled assets
    new BundleTracker({filename: './webpack-stats.json'}),

    new VueLoaderPlugin(),

    // Extract css into its own file
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:12].css',
    }),
  ],
  optimization: {
    // - manifest.js with webpack init stuff
    // - vendor.js with anything from /node_modules/
    // - app.js our code
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'vendor',
          test: /\/node_modules\//,
          chunks: 'all'
        },
      }
    },
    runtimeChunk: {
      name: 'manifest'
    }
  },

Plz help ! 😄

The same problem… I temporarily had to abandon any components (import css files inside js) Instead, I only import component files into my js entry. and in main.scss I import only scss components files. That is, while this problem is relevant, I cannot use webpack plugins to process scss / css and have to make the add-in a separate process (via node-sass) I don’t know why there are so few people who would notice this problem and start writing about it to the developers … Because for me this problem is just a critical … She put my development at risk, there was no time for a decision or for a search …

I recently experienced this problem occur by upgrading from 0.4.0 to 0.4.1.

Unfortunately due to rolling back and not having time I won’t be able to chase down the exact issue and provide a minimal replication.

I’ve experience drift between dev and production styles in the past due to changes in the ordering in which they are included which is understandable (I don’t use mini-css-extract-plugin in dev), however 0.4.1 changing means I will have to go back and re-check all dev/prod drift.

@boraturant it still works the same as described in my first message here. But I wasn’t able to reproduce it, when I removed 99% of the app and left just one page and a single component for demonstration purpose. In this case it works as expected, identically in prod and dev.

So I just used !important as a temporary workaround. If you manage to create a minimal reproducible test repo, guys here might be able to help us.