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/

Answer 2

For true Zurb newbies like me, here's the answer I was looking for (and have just wasted hours trying to find).

When you install Foundation 6, you end up with an SCSS file beginning something like this:

// Dependencies
@import '../_vendor/normalize-scss/sass/normalize';  
@import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies'; 
@import '../_vendor/sassy-lists/stylesheets/helpers/true';
@import '../_vendor/sassy-lists/stylesheets/functions/purge';
@import '../_vendor/sassy-lists/stylesheets/functions/remove';
@import '../_vendor/sassy-lists/stylesheets/functions/replace';
@import '../_vendor/sassy-lists/stylesheets/functions/to-list';

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

This runs the code in the SCSS files to generate variables and mix-ins. Here's an example of a variable:

$dropdown-padding: 1rem !default;

Here's an example of a mix-in:

@mixin foundation-typography {
  @include foundation-typography-base;
  @include foundation-typography-helpers;
  @include foundation-text-alignment;
  @include foundation-print-styles;
}

Compiling this into CSS will generate precisely nothing. You'll have a set of variables that you could use, and a set of mix-ins (functions, basically) you could call, but until you do so you won't generate any CSS. So the next thing you could do is comment back in this line:

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

However, you'll still get nothing, because all this does is to set default values for your variables (so setting fonts, colours, spacings, etc). What you need to do is to create a new SCSS file (let's call it test.scss) to start something like this:

@import 'foundation';

@include foundation-global-styles;
@include foundation-xy-grid-classes;

The first line includes the file which references all of the other SCSS files.

You can get a list of possible things to include at the Zurb site here. What this is doing is running a series of mix-ins. Here's the beginning of the one called "foundation-global-styles", for example, which you can find in the global.scss file:

@mixin foundation-global-styles {
  @include -zf-normalize;

  // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
  .foundation-mq {
    font-family: '#{-zf-bp-serialize($breakpoints)}';
  }

It's these mix-ins which generate the CSS. All of this was probably obvious to everyone else, but it wasn't to me!