[Webpack 4] Wrong order of entries when using less-loader and @import

[garygreen]

Example

As you can see, there are two entry points:

var webpack = require('webpack');
var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {

    entry: {
        site: [
            './bootstrap.less',
            './app.less',
        ]
    },

    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name].js',
    },

   module: {
       rules: [
       {
           test: /\.less$/,
           use: ExtractTextPlugin.extract({
               use: ['css-loader', 'less-loader'],
               fallback: 'style-loader'
           })
       }
       ]
     },

    plugins: [
       new ExtractTextPlugin('css/[name].css')
    ]

};

The bootstrap.less uses @import to import various bootstrap components (in this case, bootstrap-badge.less).

Result

.app-badge {
  color: yellow;
}
.bootstrap-badge {
  color: blue;
}

Expected

.bootstrap-badge {
  color: blue;
}
.app-badge {
  color: yellow;
}

The bootstrap.less file is the first entry, so whatever is output in that less file should be included first, yet it's added to the end.

It seems like it's getting confused when you use an @import inside the less file.

In webpack 3, the order is as expected.

[garygreen]

Or is this a problem with css-loader instead?

[garygreen]

Possibly related to #710 ?

[e00dan]

I get the same using:

module: {
		rules: [
			// Loader for the stylesheets
      {
        test: /\.(css|sass|scss)$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: false
              }
            },
            {
              loader: 'resolve-url-loader'
            },
            {
              loader: 'sass-loader'
            }
          ],
          fallback: 'style-loader'
        })
      }
		]
  },

The funny thing is when I edit CSS file or file when I import the styles everything is correct then (after reload). :)

Reproduction:

1. Clone repo on branch feature/webpack-4: [FEATURE] Upgrade to Webpack 4. chronologic/eth-alarm-clock-dapp#180

2. run yarn && yarn dev

3. see header on localhost:8080 - will have white background instead of transparent (bad order of CSS)

4. edit anything in file entry.js (for example comment styles.scss, save, uncomment, save)

5. see the refreshed site on localhost:8080 - header will be now transparent :D

I can open separate issue since I have reproduction steps, but thought it might be the same problem. :)

[michael-ciniawsky]

TL;DR Use mini-css-extract-plugin instead :)

The webpack >= v4.0.0 'support' for extract-text-webpack-plugin was moved to mini-css-extract-plugin as more lightweight approach for webpack >= v4.0.0 and ETWP entered maintenance mode. We are sorry for the inconvenience here, but ETWP reached a point where maintaining it become too much of a burden and it's not the first time upgrading a major webpack version was complicated and cumbersome due to issues with ETWP. The mid-term plan is integrate CSS support directly into webpack to avoid this kind of issue in the future

[monochrome-yeh]

@michael-ciniawsky , however, How to use min-css-extract-plugin to group splited css?
there's no option for spliting chunks.