I'm trying to compile my .scss files with gulp-sass. I'm using Bourbon, Susy, and Breakpoint. I have installed them all as bower components.
When I run gulp sass task I get this error:
events.js:85
throw er; // Unhandled 'error' event
^
Error: sass/base/_buttons.scss
5:12 no mixin named appearance
Appearance is a Bourbon mixin. I've tried playing around with different ways of changing the path to Bourbon including adding the entire path in the @import statement in my main.scss file. If the path isn't right, gulp complains that the file can't be found. So it seems at least the path is right.
Here is my gulp file:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var bourbon = require('node-bourbon');
//bourbon.includePaths
bourbon.with('bower_components/bourbon')
var sourcemaps = require('gulp-sourcemaps');
var notify = require('gulp-notify');
var browserSync = require('browser-sync').create();
gulp.task('sass', function () {
gulp.src('sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
errLogToConsole: true,
includePaths: require('node-bourbon').includePaths
}))
.pipe(prefix(
'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
))
.pipe(sourcemaps.write('../maps'))
.pipe(notify({
message: 'Styles task complete'
}))
.pipe(gulp.dest('../css'));
.pipe(browserSync.stream());
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
and the dependencies from my package.json:
"devDependencies": {
"browser-sync": "^2.7.13",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-minify-css": "^1.2.0",
"gulp-notify": "^2.2.0",
"gulp-sass": "^2.0.3",
"gulp-sourcemaps": "^1.5.2",
"node-bourbon": "^4.2.3"
}
This is my first time trying to set up Gulp, so any help would be greatly appreciated.