Webpack combining order issues

• 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.

[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

[medelasri]

Please update this!