How to properly setup gulp/sass

[OvalMedia]

I am familiar with gulp, using it for all my projects (foundation 5 so far). When I try to setup bones for sass usage it looks unfinished or unprepared for sass. So I wonder where to go from here. For example: each of the sass files in the sccs folder simply include "foundation". Of course that won't work because the foundation files all reside in the bower_components folder. Compilation must fail.

This is my gulpfile in project root:

`'use strict';

var gulp = require('gulp'); var sass = require('gulp-sass'); var plumber = require('gulp-plumber'); var uglify = require('gulp-uglify');

var skinDir = './theme/';

var js_src = skinDir + 'js-src/*/.js'; var js_dst = skinDir + 'js'; var scss_src = skinDir + 'scss/*/.scss'; var scss_dst = skinDir + 'css';

// SASS gulp.task('sass', function () { gulp.src(scss_src) .pipe(plumber()) .pipe(sass({ sourceComments: true, //outputStyle: 'compressed' }).on('error', sass.logError)) .pipe(gulp.dest(scss_dst)); });

// JAVASCRIPT gulp.task('scripts', function () { gulp.src(js_src) .pipe(plumber()) .pipe(uglify()) .pipe(gulp.dest(js_dst)); });

gulp.task('watch', function () { gulp.watch(scss_src, ['sass']); gulp.watch(js_src, ['scripts']); });

gulp.task('default', function () { gulp.start('watch'); });`

The "theme" folder is a softlink from project root to user/themes/bones, in case you are wondering. Am I missing something?

[OvalMedia]

This is what I did:

I replaced all occurences of... @import 'foundation'; with... @import '../bower_components/foundation-sites/scss/foundation';

and in the files ui-animations.scss and ui-trnasitions.scss... @import 'motion-ui'; with... @import '../bower_components/motion-ui/motion-ui';

Now the files compile without errors.