Just getting started with Stack Overflow and Gulp (using version 3.9.1). My goal is to compile all of my scss files into a single css file for my website. Here's what I have in my gulpfile so far:
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
sass.compiler = require('node-sass');
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('sass', [], function() {
gulp.src("resources/scss/**/*.scss")
.pipe(concat('main.scss'))
.pipe(sass())
.on('error', console.error.bind(console))
.pipe(gulp.dest('resources/css'));
});
gulp.task('watch', function () {
gulp.watch('resources/scss/**/*.scss', ['sass']);
});
Here is the content of my compiled scss file:
@charset "UTF-8";
@import "partials/variables";
@import "partials/typography";
@import "partials/utilities";
@import "partials/nav";
@import "partials/gallery";
@import "partials/footer";
@import "partials/brand";
However, when I check the main.css file generated by my gulp script, everything from each imported file appears twice. Can anyone shed some light on what I might be doing wrong? I've seen similar questions but couldn't find a solution that worked for me.