Search code examples
laravelsasslaravel-elixir

Laravel Elixir combining Sass files in wrong order

I have three Sass files in the same directory: _include.scss, app.scss and partials.scss.

Both app.scss and partials.scss have an import at the first line:

@import "include";

And at the first line in _include.scss:

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

My gulpfile.js looks like this:

var elixir = require('laravel-elixir');
elixir(function(mix) {
    mix.sass([
        'app.scss',
        'partials.scss'
    ]);
});

Bootstrap's and my own Sass code is combined into the same CSS file (public/css/app.css). The only problem is that Bootstrap's CSS is inserted after app.scss, so any changes I make will be overridden by Bootstrap if they collide. partials.scss is inserted at the correctly at the bottom.

What causes this? I have, as far as I can see, the exact same setup in other projects without this problem.

Solution

  • The error lies in the doubled @import "include"; statement:

    Both app.scss and partials.scss have an import at the first line

    There is an issue for import once semantics in SASS, but it is still not resolved. I would suggest to include the library only in one place until the issue is resolved.

    Update: There is an informative blog post on the topic as well, which might help you to find a workaround that suits you.