Gulp Elixir: Wrong CSS SourceMap After 2 Tasks: SASS Compile and Combine Stylesheets

Question

I have multiple sass files (with one style.scss containing all includes) and a couple of css libraries, which I want to combine in one final style.min.css.

I've configured 2 tasks with elixir:

1. Compiles my sass file: 'style.scss' (containing all includes) to css: 'public/css/style.css'
2. Combines the compiled css: 'public/css/style.css' with other stylesheets (libraries) into the final: 'public/css/style.min.css' Here's my gulpfile:

elixir(function(mix) {
    mix
        .sass('style.scss', 'public/css/style.css')
        .styles([
            'path-to-lib/some-random-lib/lib.css',
            'path-to-lib/another-random-lib/lib.css',
            '/public/css/style.css'
        ], 'public/css/style.min.css')
});

Problem: The sass compile task creates correct sourcemap, pointing to the right lines in .scss, but the second task which combines the styles - creates a sourcemap that is pointing to the lines in 'public/css/style.css', instead of the ones in the .scss files :(

Does anybody know a way how I can force the final sourcemap to point to the lines in the sass files?

Answer 1

Finally, after 3 months, I found a solution!

Instead of calling both - mix.sass to compile SASS and then mix.styles to combine css stylesheets, I just wrapped up everything in the mix.sass

elixir(function(mix) {
    mix.sass([
        'path-to-lib/some-random-lib/lib.css',
        'path-to-lib/another-random-lib/lib.css',
        '/public/css/style.css'

        'style.scss'
    ], 'public/css/style.css')
});

This trick fixes the source map issue.