Skip to content

Foundation sass gulp browsersync - @import foundation save file twice after browsersync reloading #71

@ghost

Description

Hello,

When i use @import foundation in my scss i have need to save my scss file twice after browsersync reloading.
When i remove @import foundation in my scss it works perfectly.

Here my gulpfile.js

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

gulp.task('default', ['svgo'], function() {
	browserSync.init({
        proxy: "thermi.agencealbum.com",
        files: "/albumpress/",
        snippetOptions: {
	        rule: {
	            match: /$/
	        }
	    },
	    open: false
    });

    gulp.watch("img/*.svg", ['svgo']).on('change', browserSync.reload);
    gulp.watch("scss/*.scss", ['compass']).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());
});

Here my scss

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

body{
	background-color: blue;
}

Thanks for your answer.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions