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 belie

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/