Webpack combining order issues

[LiamAird]

• Laravel Mix Version: 0.8.1
• Node Version: v6.5.0
• NPM Version: 3.10.3
• OS: Windows 10

Description:

I seem to be have some strange issues with the compile order of my requires and imports in app.scss and app.js.

They look like this:
app.scss

// Variables
@import "variables";

// Imports
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import "~admin-lte/dist/css/AdminLTE.css";
@import "~admin-lte/dist/css/skins/_all-skins.css";
@import "~font-awesome/scss/font-awesome.scss";
@import "~jquery-form-validator/src/theme-default.css";
@import "~simplemde/dist/simplemde.min.css";
// Custom
@import "custom";

app.js

require('./bootstrap.js');

require('admin-lte/dist/js/app.js');
require('jquery-form-validator/form-validator/jquery.form-validator.js');
require('jquery-form-validator/form-validator/security.js');`

Webpack looks like this:

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sourceMaps();`

However, the order of the combined files are not how they are required or imported.
For example, the AdminLTE styles is loaded in before the Bootstrap styles.
Last inserted is Fontawesome, second to last is Bootstrap styles. In the middle of it all I have my Custom, which is imported lastly in the app.scss - hard to make custom changes, if they aren't combined in the right order.

So what is wrong?
Do webpack combine them in a specific order? Gulp did combine in the order of imports and requires.

Steps To Reproduce:

1. Install fresh laravel
2. Import NPM components as described above
3. Insert them in app.js and app.scss
4. Run npm run dev
5. Check browser for the ordering.

[JeffreyWay]

This seems to be a Webpack-specific issue that we have no control over.

webpack/webpack#215

I'll nudge the Webpack team to see if any progress has been made.

[jblyberg]

I'm experiencing the same exact issue. Makes mix/webpack unusable, really. Are there any workarounds?

• Laravel Mix Version: 0.11.4
• Node Version: v7.9.0
• NPM Version: 4.5.0
• OS: OSX 10.12.4

[wadified]

Any updates for this please??

[aso824]

Bug still exists, even with updated extract-text-webpack-plugin in dependencies to v3.0.0 with Mix@1.4.2 version (I found in webpack issue 215 information that this bug comes from this package in version below 3.0.0).
Is there any workaround? Mix is currently unusable, I must compile and link files separately.

[medelasri]

Please update this!

[Snaver]

Silly issue.. Surprised webpack haven't fixed this yet.

You can work around this however, and still keep everything within laravel-mix - it just requires you to split out to multiple CSS files..

webpack.mix.js

mix.sass('resources/assets/sass/bootstrap.scss', 'public/css');
mix.sass('resources/assets/sass/vendor.scss', 'public/css');
mix.sass('resources/assets/sass/app.scss', 'public/css');

bootstrap.scss

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

app.blade.php

<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
<link href="{{ asset('css/vendor.css') }}" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

[danielcommesse]

This is still an issue which makes Laravel Mix unusable... Has anyone find a fix?

Node Version: v8.9.4
NPM Version: 5.6.0
OS: Ubuntu 16.04

[cstns]

+1

[fake-fur]

+1

[itepifanio]

+1

[csimpi]

+1

[kasiakorber]

+1

[tomsgad]

+1

[gbelot2003]

+1

[Akecel]

+1

[hassanimtiaz26]

+1

[handhikadj]

+1

[bansalvinay]

+1

[SUXUMI]

Today is 2021 and the issue still exists.

So the solution what I found is to use third party plugins .scss files OR .css files only. In this case importing order is OK.
But if I mix third party plugins' .css and .scss files, then .css files always goes first.

[SUXUMI]

This seems to be a Webpack-specific issue that we have no control over.

webpack/webpack#215

I'll nudge the Webpack team to see if any progress has been made.

Dear @JeffreyWay

I've got reply that the issue is not connected with webpack
webpack/webpack#215 (comment)
on my comment (webpack/webpack#215 (comment))

so where is the real problem?

[thecrypticace]

This is a problem with sass itself and not with mix or webpack. It is not something we can fix, sorry.