Foundation browsersync - sauvegarder fichier deux fois rechargement

Bonjour,

Quand j'utilise @import foundation dans mon scss j'ai besoin de sauvegarder mon fichier scss deux fois pour que le rechargement fonctionne avec browsersync. Quand je supprime @import foundation dans mon scss il fonctionne parfaitement.

Avez-vous une idée ?

Mon fichier gulfile.js

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var compass = require('gulp-compass');
var svgmin = require('gulp-svgmin');

gulp.task('watch', function() {

    browserSync.init({
        proxy: "thermi.agencealbum.com",
        files: "albumpress/",
        snippetOptions: {
            rule: {
                match: /$/
            }
        },
        open: false
    });

    gulp.watch("img/*.svg", ['svgo']);
    gulp.watch("scss/*.scss", ['compass']);

    gulp.watch("css/*.css").on('change', browserSync.reload);
});

//compass 
gulp.task('compass', function() {
    return gulp.src('scss/*.scss')
        .pipe(compass({
          css: 'css',
          sass: 'scss',
          import_path : 'node_modules/foundation-sites/scss/'
        }))
        .pipe(gulp.dest('css/'))
        .pipe(browserSync.stream());
});

//svg optimisation 
gulp.task('svgo', function() {
    return gulp.src('img/*.svg')
        .pipe(svgmin({
            plugins: [{
                removeStyleElement: true
            }]
        }))
        .pipe(gulp.dest('img/'))
        .pipe(browserSync.stream());
});

Mon fichier scss

@import 'settings';
@import 'foundation';

body{
    background-color: blue;
}

Merci pour vos réponses