Foundation-sites: Import not working for foundation-sites/scss/foundation

[codeengie]

I installed 'foundation' using bower on a few projects without any issues using gulp and includePath but I have been unable to do the same with 'foundation-sites'. I've been using the same gulp config but no such luck. Here is my gulp config:

// gulp/tasks/styles.js
module.exports = function(gulp, plugins, browsersync, buildType) {
    return function() {
        return gulp.src('styles/app.scss')
            .pipe(plugins.sourcemaps.init())
            .pipe(plugins.sass({
                includePaths: ['bower_components/foundation-sites/scss']
            }).on('error', plugins.sass.logError))
                browsers: ['last 2 versions']
            }))
            .pipe(plugins.if(buildType, plugins.cssnano()))
            .pipe(plugins.sourcemaps.write())
            .pipe(gulp.dest('../assets/styles/'))
            .pipe(plugins.if(!buildType, browsersync.stream()));
    }
}

// styles/app.scss
@import 'foundation';

I also tried the 'foundation-sites' folder within 'foundation' but no luck on any. When I run my gulp task I get no errors in the console. I can see that it is importing 'foundation.scss.' but the rest of the imports contained do not get imported. In my destination folder I can see my app.css created but the only thing that appears are the Zurb comments. Any help would be appreciated, thanks.

[gakimball]

Have you added these CSS includes below the @import? See here: https://github.com/zurb/foundation-zurb-template/blob/master/src/assets/scss/app.scss#L7

[codeengie]

I've tried manually adding them similar to the link you provided but was not able to get the imports. I tried it on 2 different PC's one running Win7/Win10 x64. Both running Bower 1.7.2, Node 5.3.0 and NPM 3.3.12.

[gakimball]

@cvillanujr Do you see any errors like "mixin not found"?

[codeengie]

I gave it another run with all the components found in 'foundation.scss' and I get no console errors. Since I'm not directly importing 'foundation.scss' the output app.css is blank. So no change in either case.

[codeengie]

I did the following:

// gulp/task/styles.js
includePaths: ['bower_components/foundation-sites/']

// styles/app.css
@import 'assets/foundation';

and it worked the way it should. Also tried it with:

// styles/app.css
@import 'scss/foundation';

but that failed.

[gakimball]

When you say failed, do you get a console error, or just no CSS?

[codeengie]

Sorry, shouldn't of said failed. I meant I get the same issue as before where none of the @import files are actually being imported. I also get no errors in the console. Should I be using assets/foundation instead of scss/foundation?

[colin-marshall]

@cvillanujr you should read this answer I posted on Stack Overflow: http://stackoverflow.com/a/34538606/2755888

I think what is possibly happening is you are not including any of the components, you are only importing their mixins.

[colin-marshall]

The reason @import assets/foundation; works is because first it has @import ../scss/foundation, followed by @include foundation-everything, which gives you all of the CSS for the components.

[codeengie]

Thank you I got it working. I should of looked under the hood of Foundation 6 and payed more attention to the partials/mixins. I guess I was expecting Foundation 6 to work/imported the same way 5 was in my previous projects. I was stuck on stupid with @import vs @include. I should of realized this sooner when you posted your link @gakimball. Either way it's a learning experience, thanks for your help @colin-marshall and @gakimball.

[gakimball]

Glad you got it sorted out! :) The new setup is deliberately designed to make the distinction between using the guts of the framework, versus the default CSS, more concrete. (The process of disabling CSS if you wanted to, say, use the grid semantically was always a point of confusion for developers.) It does require a little more boilerplate, though, as just importing the framework doesn't print any CSS.

[asecondwill]

Is this in the docs anywhere?

[DanielRuf]

Is this in the docs anywhere?

What exactly?

We have a page about the needed configurations and setups:
https://foundation.zurb.com/sites/docs/sass.html