Laravel-mix: Sass content order when import CSS

[florianbouvot]

• Laravel Mix Version: 6.0.6
• Node Version: 15.5.0
• NPM Version: 6.14.0
• OS: MacOs 11.1

Description:

I'm coming from Gulp and I discover it's possible to import CSS file directly in Sass with Laravel Mix (not possible with Sass by default). But The issue is that source order are not maintained.

Example:

@import "base";

@import "button";
@import "baguettebox.js/dist/baguetteBox.min.css";

The compiled CSS files import CSS files before Sass import.
In this example bagettebox will be present before base and button.
Is there a workaround to fix that?

[thecrypticace]

Confirmed with a small test case. I'm not sure if this is a Mix problem or a sass-loader/css-loader problem.

[thecrypticace]

I've opened a bug in the sass-loader repo: https://github.com/webpack-contrib/sass-loader/issues/911

[florianbouvot]

@thecrypticace thank you.

[thecrypticace]

Hey, @florianbouvot, wanted to update you on this. This is appears to be a sass bug. I'll be attempting to track it down to file an issue there this weekend.

[florianbouvot]

Thank a lot @thecrypticace.

Thinking again,
1 - Sass can't include CSS so they use CSS import at beginning of file.
2 - CSS loader include the CSS

So it's a specificity of how webpack works.
It doesn't work same on Gulp for example: I copy and rename *.css file to *.sass to a vendor folder and then I import it in my main Sass file.

[thecrypticace]

Sass can't include CSS so they import it at the beginning which is the problem here. They shouldn't be moving the import.

[JeffreyWay]

It sounds like there's nothing we can do specifically on the Mix end to solve this, so I'll go ahead and close it.

[florianbouvot]

@JeffreyWay thanks for your time and work ;)