NPM / Gulp Error: File to import not found or unreadable: bourbon

[fschroiff]

Fresh install, this is in my package.json:

  "dependencies": {
    "bourbon": "^4.2.6",
    "bourbon-neat": "^1.7.2"
  },

This is in my gulpfile:

  bourbon       = require("bourbon").includePaths,
  neat          = require("bourbon-neat").includePaths;

This is in my style.scss

@import "bourbon";
@import "neat";

This is the error I get:

Error in plugin 'sass'
Message:
    sass/style.scss
Error: File to import not found or unreadable: bourbon
       Parent style sheet: stdin
        on line 10 of stdin
>> @import "bourbon";
   ^

What changed? I have several other projects where this exact setup works fine.

[tysongach]

Hi @fschroiff! What Sass package are you using?

[fschroiff]

Hi @tysongach, I am using gulp-sass 2.2.0 (which uses node-sass 3.4.2).

[idcmardelplata]

Buen día, no se si sirva pero a mi no me da problemas con esta configuración en el gulpfile.js

gulp.task('sass', function(){
    return gulp.src('./scss/**/*.scss')
    .pipe(sass().on('err', sass.logError))
    .pipe(gulp.dest("./dist/css"))

y bourbon lo tengo instalado dentro de la carpeta scss de esta manera:

• base/
• layouts/
• modules/
• plugins/
  • bourbon/
  • neat/
  • _plugins-dir.scss
• styles.scss

y no me genera ningún problema al ejecutar la tarea.

[whmii]

@fschroiff you may be missing the sass path declaration in your gulpfile. Check out the Bitters contrib gulpfile. It works so there may be something that your gulpfile needs.

You could probably use the following…

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

var paths = {
  scss: [
    "./some sass dir/**/*.scss",
    "./some other sass dir/*.scss"
  ]
};

gulp.task("sass", function () {
  return gulp.src(paths.scss)
    .pipe(sass({
      includePaths: ["styles"].concat(bourbon)
    }))
    .pipe(autoprefix("last 2 versions"))
    .pipe(gulp.dest("where ever your css goes "))
    .pipe(connect.reload());
});

[whmii]

@fschroiff any word on this? get things sorted out?

[michaelpumo]

@fschroiff @whmii

I solved this by doing the following (reduced code for brevity):

const bourbon = require("bourbon");
const neat = require("bourbon-neat");

// ...your code before.
.pipe(_.sass({ 
  includePaths: [
    neat.includePaths, 
    bourbon.includePaths
  ]
})) 
// ...your code after.

Hope this helps someone out.