问题
I have just spent the last 5 days playing with this and trying to get the following to work together:
¬ Libsass
¬ Susy
¬ Gulp
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/
回答1:
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:
gulp-sass 1.3.1
¬ node-sass 2.0.0-beta
¬ libsass 3.1.0-beta - This needed updating to libsass 3.1.0-beta.2
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.
来源:https://stackoverflow.com/questions/28541188/getting-libsass-gulp-susy-to-work-together