13

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.

user3586478
  • 141
  • 1
  • 6

6 Answers6

14

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

Tomasz Rozmus
  • 1,646
  • 13
  • 21
  • Yes, I was confused by this string `@import 'foundation';` so after I changed path and include **foundation-sites.scss** this eventually start working. Thanks. – user3586478 Nov 28 '15 at 21:30
  • I'm having this same issue, but I'm dropping in here to say that I don't believe this is the correct answer. Zurb actually discourages using `foundation-sites.scss` and to import how the OP is doing now. (see: https://github.com/zurb/foundation-sites/issues/7537) You don't want to use `foundation-sites.scss` unless you want to include everything. If you're doing customized installs, which you should, youd want to modify components in `foundation.scss`. That being said. Mine's not compiling either. – erwstout Dec 30 '15 at 21:05
13

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' }));
});
Jimmy Obonyo Abor
  • 7,335
  • 10
  • 43
  • 71
  • I love this solution. If I want to trim down what I wish to use, I can create my own copy of foundation.scss and create a custom mixin. The includePaths was the most helpful piece of this. Thanks for sharing Jimmy. – UncleAdam Jun 16 '17 at 00:27
  • @UncleAdam Welcome be free to ask me any web development related questions – Jimmy Obonyo Abor Jun 16 '17 at 01:11
2

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.

Roman Edirisinghe
  • 216
  • 2
  • 4
1

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.

tomByrer
  • 1,105
  • 12
  • 21
0

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.

Randy Collier
  • 136
  • 1
  • 1
  • 11
0

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.

Marcus Ekström
  • 410
  • 6
  • 11