Sass content order when import CSS

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

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

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