CSS incorrect order

[callumacrae]

Hello!

I have the following section in my main SCSS file:

// load vendors
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "~@samknows/css-framework/dst/samknows.css";
@import "vendor/vuejs";

In my output CSS, I'm getting them in the following order:

samknows/css-framework
bootstrap
vuejs

This is pretty critical: build tools shouldn't be changing the order of CSS!

Any idea how I can fix this?

[jhnns]

I'm pretty confident that the sass-loader is not changing the order. We have a lot of tests for that. Please remove every other loader and try to remove as much code as possible while the error still occurs. This will help to track down the problem.

[callumacrae]

/**
* a comment
*/

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/_print.scss";
@import "~bootstrap/dist/css/bootstrap.min.css";

output:

bootstrap
/**
* a comment
*/
bootstrap-sass

Definitely an issue, probably not in sass-loader.

[jgornick]

@callumacrae Did you ever solve why the order is not right?

As far as I can tell it has to do with the style-loader and the way in which it inserts CSS into the header. However, I think that due to the nature of lazy loading imports, there's really not a good way to specify an order.

webpack-contrib/style-loader#17

[callumacrae]

Yeah it was user error - it was one of my Vue modules being required first and adding bootstrap again. Wasn't a problem in this.