I have just spent the last 5 days playing with this and trying to get the following to work together:
But now I have it working I have just gone for 45s to 700ms This is something I feel I should share.
Initial Problem
Gulp
gulp.task('sass', function () { return gulp.src('./frontend/sass/style.scss') .pipe(sass({ 'require':'susy' })) .pipe(gulp.dest('./app/www/css')) });
Sass
@import "susy";
Inital Error
[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/www.hutber.com/frontend/sass/
The complete working setup
package.json
"devDependencies": { "gulp": "~3.8.10", "gulp-sass": "~1.3.2", //this installs libsass for us "gulp-sourcemaps": "~1.3.0", "gulp-plumber": "~0.6.6", "susy":"~2.2.2" }
Gulp sass Task
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'); //libsass gulp.task('sass', function () { return gulp.src('./frontend/sass/style.scss') .pipe(sourcemaps.init()) .pipe(sass({ includePaths: [ './node_modules/susy/sass' //required for sass ] })) //.pipe(minifyCSS()) //move to prod settings .pipe(sourcemaps.write('./app/www/css'))) .pipe(gulp.dest('./app/www/css')) });
Sass
@import "susy"; $susy: ( global-box-sizing: border-box, use-custom: (rem: true), columns: 12, gutters: (1/4), debug: ( image: hide, color: rgba(#66f, .25), output: background, toggle: top right, ) );
Errors
You will need to do the following to avoid the may only compare numbers error when running the task
Update node-sass's package.json
I had to update libsass's dependency as follows:
The above will become redundant as soon as node-sass update their dependency to use the newest libsass
Last Step
Then inside my sass use (1/4) rather than just 1/4. This will force it to be treated as a number. Bug taken from https://github.com/sass/libsass/issues/590
You should be able to run gulp sass without any errors.
翻译