Gulp-sass not compiling Foundation 6 properly

Question

I'm having some issues with Foundation 6 files, for some reasons they are just not including all of the sass components. I tried to use Foundation 5 and it worked fine.

Here is my gulp task:

gulp.task('styles', ['clearCss'], function() {
    gulp.src('assets/sass/app.scss')
        .pipe(plumber(plumberErrorHandler))
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed'
        })
        .on('error', notify.onError(function(error) {
            return "Error: " + error.message;
        }))
        )
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >= 9']
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./assets/dist/css')) 
        .pipe(browserSync.stream({match: '**/*.css'}))
        .pipe(notify({
            message: "Styles task complete!"
        }));
});

And here is my app.scss:

// Import Foundation
@import "../components/foundation/scss/foundation";

It works with my own sass files, but completely ignoring foundation parts.

Answer 1

You should import a file foundation-sites.scss, not scss/foundation.scss. File foundation.scss has only a @mixin foundation-everything which is included in foundation-sites.scss:

@include foundation-everything;

However foundation-sites.scss has an error in 6.0.4, this is my log:

Error in plugin 'sass'
Message:
    bower_components\foundation-sites\foundation-sites.scss
Error: File to import not found or unreadable: foundation
       Parent style sheet: stdin
        on line 1 of stdin
>> @import 'foundation';

The fix:

Change line nr 1 in file foundation-sites.scss from @import 'foundation'; to @import 'scss/foundation';

Answer 2

The Correct Approach for foundation 6 :

if you Look at the foundation.scss file (https://github.com/zurb/foundation-sites-6/blob/develop/scss/foundation.scss)

Yes it imports all the required components, but since they are now mixins and not regular sass you have to explictly tell that you want to make use of them, by simply calling the mixin.

app.scss

@import 'foundation';
@include foundation-everything; // Very important if you want to include all of foundation css to your complied css

gulpfile.js

gulp.task('scss', function() {
    return gulp.src('app.scss')
        .pipe(plugins.sass(
           {includePaths: ['./node_modules/foundation-sites/scss']}
        ))
        .pipe(gulp.dest('css'))
        .pipe(plugins.notify({ message: 'Sass task complete' }));
});