Libsass with Susy not working + Gulp

Question

I've no doubt others have got this working... I just haven't quite worked out how right now.

Gulp

var gulp = require('gulp');
var sass = require('gulp-sass');
var handleErrors = require('../util/handleErrors');
var sourcemaps = require('gulp-sourcemaps');
var minifyCSS = require('gulp-minify-css');

gulp.task('sass', function () {
    return gulp.src('./frontend/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            'require':'susy'
        }))
        //.pipe(minifyCSS())
        .pipe(sourcemaps.write('./app/www/css'))
        .on('error', handleErrors)
        .pipe(gulp.dest('./app/www/css'))
});

Sass

@import "susy";

Gulp Running

[23:58:08] Starting 'sass'...

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: file to import not found or unreadable: susy
Current dir: C:/var/www/rnli.hutber.com/frontend/sass/

I have installed [email protected] in the root along side the gulp file with the following: gem install susy

Current working setup with gulp-ruby-sass

I do however have it working, which confirms that susy is working via the gem installed with the following code:

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var handleErrors = require('../util/handleErrors');
var minifyCSS = require('gulp-minify-css');

gulp.task('sass', function () {
    return gulp.src('./frontend/sass/style.scss')
        .pipe(sass({
            'sourcemapPath':'./app/www/css',
            'require':'susy'
        }))
        //.pipe(minifyCSS())
        .on('error', handleErrors)
        .pipe(gulp.dest('./'))
});

NOTE The above code will not working using [email protected]' It will only work as I can tell withv0.7.1`

package.json

  "devDependencies": {
    "gulp": "~3.8.10",
    "gulp-sass": "~1.3.2",
    "gulp-ruby-sass": "~0.7.1",
    "gulp-sourcemaps": "~1.3.0",
    "susy":"~2.2.1"
  }

How do I get susy working correctly and able to compile into css?

Answer 1

I've managed to get susy working with libsass (gulp-sass)

gulp-sass needs to know where to find files specified with an @import directive. You can try set the includesPath option in gulp-sass to point to your local copy of susy.

As I've installed susy with bower, I have something like this:

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

gulp.task('sass', function () {
  return gulp.src(config.src)
    .pipe(sass({
      includePaths: [
        'bower_components/susy/sass'
      ]
    }))
    ...
});