sass - Foundation 6 does not generate any styles

Question

I have setup a new project to test Foundation 6 using Gulp and Sass but it doesn't seem to compile at all. There is another post close to this topic, but I personally believe the accepted answer is not the correct solution - as it includes all of the components and is actually the opposite of what Zurb suggests (see this issue: https://github.com/zurb/foundation-sites/issues/7537). Anyway...

I installed Foundation 6.1.1 from bower, and added the path to my gulp-sass function in gulpfile.js like so:

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/theme.scss')
        .pipe(sass({ includePaths : ['bower_components/foundation-sites/scss'], outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(gulp.dest('css/'))
});

My theme.scss is as follows:

//vendor file
@import '../bower_components/foundation-sites/scss/settings/settings';
@import '../bower_components/foundation-sites/scss/foundation';

body{
  background: red;
}

When compiling my scss I get no errors, but the output of theme.css looks like this:

/**
 * Foundation for Sites by ZURB
 * Version 6.1.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  background: red;
}

So it appears it is hitting the file since the comment is outputted but its not compiling any of the Sass imports in foundation.scss.

Answer 1

This is happening because in Foundation 6 @import foundation only imports the Foundation mixins for use in your SCSS. It's setup this way so that you can use a component's Foundation mixins and not bloat your CSS by also adding the stock CSS classes for that component.

To import all of the Foundation CSS classes you can setup your main app.scss file (theme.scss in your case) similar to this:

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-everything;

@include motion-ui-transitions;
@include motion-ui-animations;

To import only the individual CSS classes for the components you need, setup your app.scss file (theme.scss in your case) like below, and comment out the components you don't use.

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles; // Always include the global-styles
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

@include motion-ui-transitions;
@include motion-ui-animations;

You will also want to copy the _settings.scss file from bower_components/foundation-sites/scss/settings/ and place it in your project's scss directory.

Finally, make sure you include these two paths in the sass task in your gulpfile.js:

• bower_components/foundation-sites/scss
• bower_components/motion-ui/src/