Libsass with Susy not working + Gulp - sass

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 susy#2.2.2 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 gulp-ruby-sass#1.0.0alpha' 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'
]
}))
...
});

Answer 2

I had the same issue, but with Grunt instead of Gulp.
You could do is use the full path for susy.
First find out where your gems are installed (gem env, and look up for GEM PATHS; in my case they where in /Library/Ruby/Gems/2.0.0).
And then in your style.scss file instead of #import susy you do:
#import "/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy";
(Replace 2.2.2 for your version of susy, but if you are going to use libsass you should use something quite up to date; and you'll have to change that line when you upgrade...)
Not as elegant, but a small price to pay to use libsass.
Update: If you put includePaths: ['/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass'] in your Gulp task you can get away with just "#import susy;", although you just moved the untidyness somewhere else.
It's probably neater to do it with Bower, as explained in another answer down here, and to have a local susy install for the project; but since I'm not using bower yet (shame on me), I just use a global susy copy for all my projects.