Browsersync reloading the page instead of injecting css

So after my previous problem got solved, I'm now facing a different one. I'm using Browsersync to watch for file changes, and it works perfectly, but instead of injecting css changes, it realods the whole page whenever my css file is changed.

Here is my gulpfile:

var elixir = require('laravel-elixir');
var gulp = require('gulp');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.sass('comingsoon/soon.scss', 'public/assets/comingsoon/css/soon.css')
        .scripts('comingsoon/soon.js', 'public/assets/comingsoon/js/soon.js')
        .browserSync({
            files: [
                'app/*.*',
                'app/**/*.*',
                'public/assets/**/*.*'
            ],

            open: 'external',
            proxy: 'gate7.dev:81',
            host: 'gate7.dev',
            port: 80,
            notify: false
    });
});

via Chebli Mohamed