mini-css-extract-plugin: Conflict order of styles

It is just warning you can ignore this

This is still an issue, why was it closed?

Okay, so you are proposing me to check the order of imports in components which use css modules separately. That’s interesting and can be confused for me. If you are really want mini-css-extract-plugin users to do that, so please create eslint plugin which will help us to do that, otherwise, mini-css-extract-plugin developers should fix this issue and make it as we had before.

Sorry, but the “check your order” suggestion is pretty much impossible in a larger application without a tool doing that and thus kind of useless.

It is just warning you can ignore this

i’m ignorning my CI is not.

It’s 2023 and we are still struggling with it. any update?

Because you have conflict in order, it is expected, you need fix order, extracting css sometimes is non deterministic

@vtereshyn As you can see, we have discussed this topic here. And having proper order makes sense. However, the old one extract-text-webpack-plugin was able to resolve this issue itself properly. I wondered, why new one cannot do the same. This is a deal breaker for me right now to move to webpack 4. I resolved all the other issues, but this one cannot be resolved as no other plugin is available to be compatible. And as many, we have hundreds of files in project to be shuffled properly to import as needed. But I tried to do it manually and failed, as I can’t comprehend proper file imports tree for such big amount of components already. And also I didn’t find a tool, which would help me to traverse this file tree. So literally I am stuck and have no solution to move on.

For me

WARNING in chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"E://h-project//react-spa//.cache"}!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/less-loader/dist/cjs.js?{"javascriptEnabled":true}!./node_modules/antd/lib/input/style/index.less
 * css ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"E://h-project//react-spa//.cache"}!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/less-loader/dist/cjs.js?{"javascriptEnabled":true}!./node_modules/antd/lib/button/style/index.less

This seems to be an unfixable problem if you are using a component library and it’s imports aren’t consistent order.

For example, antd

@vtereshyn Check the order of the import of your components.

Example:

You have two components:

📄 Header.js

import css from './header.scss';

📄 Footer.js

import css from './footer.scss';

SCSS files:

📄 header.scss

@import 'variables';

📄 footer.scss

@import 'variables';

📄 variables.scss

$color1: red;
$color2: blue;

You have two views/pages/containers:

📄 Page1.js

import Header from './Header'; 
import Header from './Footer';

// ...

📄 Page2.js

import Header from './Footer';
import Header from './Header'; 

// ...

---

Reordering Page2’s imports should solve your issues

Note that I still get CSS imported in different order on dev and prod, so while the plugin doesn’t complain, as there’s no conflict, there’s still some work from your end making sure they’re imported in a certain order.

@evilebottnawi coming back to this question. I found that mini-css-extract-plugin doesn’t include almost all scss files I have in project. We talked about warnings regarding proper order. However, does it mean, that if warning appears, than styles will not be included? If not, help me find out why styles are not included. Here is my config

{
    optimization: {
      splitChunks: {
        name: 'bootstrap',
        minChunks: Infinity,
        cacheGroups: {
          bootstrap: {
            filename: '[name].[chunkhash].js'
          },
          styles: {
            name: 'styles',
            test: /\.(css|sass|scss)$/,
            chunks: 'all'
          }
        }
      }
    },
   plugins: [
      new MiniCssExtractPlugin({ filename: 'style.css' })
   ],
   rules: [
       {
          test: /\.(sa|sc|c)ss$/,
          use: [MiniCssExtractPlugin.loader,  'css-loader', 'sass-loader']
       }
   ]
}

any updates?

It is just warning you can ignore this

@evilebottnawi this is not just a warning. In projects where people have same class names, overrides of styles, etc like that (sometimes it happen without our will) it makes styles broken and we can’t move to this solution

For me, the same warnings are coming and the worst part is no css is applied on the project. FYI: I have used purify css too.