Compiling Sass for Foundaiton 6 using Gulp Sass Task Provides No CSS in Generated File

Question

I put together this gulp task using the docs to compile down my application Sass, but it doesn't seem to build any of the Foundation 6 Sass files except for the initial comment in foundation.scss.

// gulp task

'use strict';

var path = require('path');

var gulp = require('gulp');

var sass = require('gulp-sass');

var config = require('./../config.js');
var helpers = require('./../helpers.js');

gulp.task('sass', ['clean-styles'], function () {

    helpers.log('Compile Sass');

    var source = path.join(
        config.assetsPath, // <-- 'assets/js'
        config.css.sass.folder, // <-- 'sass'
        '**/*.scss'
    );

    var outputFolder = path.join(
        config.publicPath, // <-- 'public'
        config.css.outputFolder // <-- 'css'
    );

    return gulp.src(source)
               .pipe(
                   sass(config.css.sass.pluginOptions)
                       .on('error', sass.logError)
               )
               .pipe(gulp.dest(outputFolder));
});

Which going by the terminal appears to compile the sass found in app.scss with no errors thrown:

Terminal Output

$ gulp sass
[00:08:41] Using gulpfile D:\projects\app\gulpfile.js
[00:08:41] Starting 'clean-styles'...
[00:08:41] Clean Styles
[00:08:41] D:\projects\app\public\css\app.css
D:\projects\app\public\css\app.css.map
[00:08:41] Finished 'clean-styles' after 23 ms
[00:08:41] Starting 'sass'...
[00:08:41] Compile Sass
[00:08:41] Finished 'sass' after 215 ms

Sass Source Files

// app.scss

// --------------------------------------------------------------------------
// Core Foundation Imports
// --------------------------------------------------------------------------
@import "../../../public/vendors/foundation-sites/scss/foundation";

.help {
    color: red;
}

But inside the file the only thing that appears is the comment from the top of the foundation.scss and the sourcemap tag:

Compiled CSS

// app.css

/**
 * Foundation for Sites by ZURB
 * Version 6.2.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.help {
   color: red;
}

/*# sourceMappingURL=app.css.map */

Doesn't add in any of the imports located in the file. Just the comment at the top.

Foundation.scss File Imports

/**
 * Foundation for Sites by ZURB
 * Version 6.2.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

// Sass utilities
@import 'util/util';

// Global variables and styles
@import 'global';

// Components
@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
// ...

Anyone know why this is happening? I can add my own selectors and they show up, but none of Foundation 6 is compiled. I've got the latest gulp-sass and node-sass via npm.

Answer 1

You have to include all the files you need to compiled to CSS like this.

@include foundation-global-styles;
@include foundation-flex-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
....