Gulp: Unable to import Bourbon to stylesheet

Question

I recently did an update to my package.json. Upon importing Bourbon to my scss stylesheet I ran into the following Error: File to import not found or unreadable: bourbon.

Within my node-modules, I can see that I have a bourbon-neat and bourbon folder.

I need to understand and fix this for a project I'm currently working on so any help will be appreciated.

Package.json file

"devDependencies": {
    "bourbon": "^4.3.4",
    "bourbon-neat": "^2.1.0",
    "browser-sync": "^2.18.13",
    "gulp": "^3.9.1",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^3.0.0"
  }

Gulpfile.js

// Looks insides node_modules for the following 
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var plumber     = require('gulp-plumber');
var uglify      = require('gulp-uglify');
var bourbon     = require('bourbon').includePaths;
var neat        = require('bourbon-neat').includePaths;

var paths = {
    scss: [
        "source/scss/*.scss"
    ]
};

// Kick off server and watch html/scss
gulp.task('build', ['sass'],function(){
      browserSync.init({
        server: "./public"
    });

    gulp.watch('source/scss/**/*.scss',['sass']);
    gulp.watch('public/*.html').on('change', browserSync.reload);
});

// Compile Sass
gulp.task('sass', function(){
    return gulp.src(paths.scss)
        .pipe(sass({
            includePaths: ["styles"].concat(bourbon)
        }))
    .pipe(plumber()) // Prevents Gulp from tripping up
    .pipe(gulp.dest('public/css')) // save output in public css folder
    .pipe(browserSync.stream());
});

// Task Method
gulp.task('default', ['build']);

Answer 1

It may be a bug with the packages. node-neat and node-bourbon are not the official packages. Try swapping them out with bourbon and bourbon-neat.

Also you probably want to update neat to 2.1. There weren't any breaking changes so you shouldn't have any issues.

---

Update:
Also, the addition of bourbon and neat to the sass importPaths is not needed and is probably what's causing problems. The contributing page for Neat has a very similar setup to what you are trying to do. Check out https://github.com/thoughtbot/bitters/blob/master/Gulpfile.js which is a correctly functioning gulpfile that uses Neat and bourbon.

Here are two examples of how this can work, given your example.

var bourbon    = require("bourbon").includePaths,
autoprefix = require("gulp-autoprefixer"),
connect    = require("gulp-connect"),
gulp       = require("gulp"),
sass       = require("gulp-sass");

var paths = {
  scss: [
    "source/scss/*.scss"
  ]
};

gulp.task("sass", function () {
  return gulp.src(paths.scss)
    .pipe(sass({
      includePaths: ["styles"].concat(bourbon)
    }))
// etc…

---

Update 2:

I have created and tested a repository that correctly uses Gulp to run bourbon and neat.

https://github.com/thoughtbot/gulp-bourbon-neat-example

It seems that the original guplfile was not adding sass's includepaths correctly. includepaths should be an array that includes direct refferences to bourbon and neat.

Its gulpfile is as follows.

var autoprefix = require("gulp-autoprefixer"),
    connect    = require("gulp-connect"),
    gulp       = require("gulp"),
    bourbon    = require("bourbon").includePaths,
    neat       = require("bourbon-neat").includePaths,
    sass       = require("gulp-sass");

var paths = {
  scss: ["./source/assets/stylesheets/**/*.scss"]
};

gulp.task("sass", function () {
  return gulp.src(paths.scss)
    .pipe(sass({
        sourcemaps: true,
        includePaths: [bourbon, neat]
    }))
    .pipe(autoprefix("last 2 versions"))
    .pipe(gulp.dest("./source/assets/stylesheets"))
    .pipe(connect.reload());
});

gulp.task("connect", function() {
  connect.server({
    root: "source",
    port: 8000,
    livereload: true
  });
});

gulp.task("default", ["sass", "connect"], function() {
  gulp.watch(paths.scss, ["sass"]);
});