Gulp-sass not compiling Foundation 6 properly - gulp-sass

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' }));
});

Answer 3

I have gulp-sass working with foundation-sites (Foundation 6):
My main.scss file:
#charset 'UTF-8';
/**
* Main SCSS
* Version 1.0.0
* built with foundation-sites
*/
// import custom settings
#import 'settings';
// import foundation sass
#import "../bower_components/foundation-sites/scss/foundation";
/* either include all foundation components… //*/
#include foundation-everything;
/* or include specific foundation components //*/
// #include foundation-global-styles;
/* include either foundation-grid… //*/
// #include foundation-grid;
/* or foundation-flex-grid (but don't include both) //*/
// #include foundation-flex-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;
If you don't want to load all the foundation componenents, you don't have to. Instead of #include foundation-everything, simply #include the specific components you need.

Answer 4

What I did with my gulp + bower setup:
/src/scss/app.scss
#import 'settings';
#import '../../bower_components/foundation-sites/scss/foundation';
#include foundation-everything;
settings.scss contained my foundation variable overrides, custom CSS, etc. Trick for me was to #import full file path then #include the mixin.
Though it is excessive to include everything, I prefer to develop with no hassles then use uncss to clean out dead CSS code.

Answer 5

I had to edit the foundation-sites' bower.json file to change the main.scss foundation #import.
From:
"main": [
"scss/foundation.scss",
"js/foundation.js"
],
To:
"main": [
"foundation-sites.scss",
"js/foundation.js"
],
As well as the foundation-sites.scss file.
#import 'foundation';
To:
#import 'scss/foundation.scss';
I don't think this is the best route to take but my sass, grunt and bower knowledge is limited.

Answer 6

If you have a gulpfile, include 'node_modules/foundation-sites/scss' and then in your app.scss or style.scss do the following:
#import "settings/settings";
#import "foundation";
#include foundation-everything;
That way you'll import EVERYTHING Foundation has to offer. Of course, everything might be a tad overkill, but that's an optional choice.
Example of gulp task:
gulp.task('css', function() {
return gulp.src(assets + 'scss/*.scss')
.pipe(sass({
includePaths: 'node_modules/foundation-sites/scss',
errLogToConsole: true
}))
.on('error', handleError)
.pipe(prefixer())
.pipe(gulp.dest(themeDir))
.pipe(browserSync.stream());
});
Of course, handleError needs to be defined. In my case, it's defined as:
var handleError = function(err) {
if (err) {
var args = Array.prototype.slice.call(arguments);
console.log(args);
this.emit('end');
}
};
Don't forget to include the required dependencies.