Gulp-sass only compiling one of the bourbon-neat mixins

Question

I'm struggling to get gulp to correctly compile bourbon-neat sass files. Bourbon-neat is installed (locally, as are the rest of the gulp-sass related modules), @import 'neat' is added to my main site scss file and my gulp.js file includes the following lines:

var gulp = require('gulp'),
sass = require('gulp-sass'),    
neat = require('bourbon-neat').includePaths;

and

gulp.task('css', function() {    
.pipe(sass({
           includePaths: neat
    }))
}

But for some reason the only Neat mixin that's being compiled is box-sizing.scss. So the @import 'neat' is working but for just one of the 23 mixins. Any idea why?

Tsurule Vol · Answer 1 · 2017-10-05T08:17:50.567

Hope I correct understand question. Did you install bourbon themselves? Cause I didn't see in require. Just install Bourbon with neat and your task will looks like that:

...
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: ["./stylesheets/**/*.scss"]
};

gulp.task("sass", function () {
  return gulp.src(paths.scss)
    .pipe(sass({
        outputStyle: 'nested', //for example
        precision: 10,         //for example
        sourcemaps: true,      //for example
        includePaths: [bourbon, neat]
    }))
    .pipe(autoprefix("last 2 versions"))
    .pipe(gulp.dest("./stylesheets"))
    .pipe(connect.reload());
});
...

And your neat will be run with Bourbon and work together.

In your main scss include bourbon, them neat ...

@import "bourbon";
@import "neat";
@import "something_else";
...

Hope it will help you to find the way :)

Gulp-sass only compiling one of the bourbon-neat mixins

1 Answers1