Gulp Sass Bourbon, Not give me style.css

1.3k views Asked by At

I have the problem, is went I run the task, everything is ok, but never give me the style.css result or output.

var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
compass = require('gulp-compass'),
neat = require ('node-neat').includePaths,
bourbon = require('node-bourbon');

// Bourbon Compile
gulp.task("compileBourbon", function(){
    gulp.src('./src/sass/bourbon.scss')
    .pipe(sass({
        includePaths: require('node-bourbon').includePaths,
        style: 'compressed',
        quiet: true
    }))
    .pipe(gulp.dest('./builds/development/css'));
});
1

There are 1 answers

0
whmii On

Bourbon is a mixin & function library so simply using it won't actually output any code, similar to how defining a function doesn't actually run the function. Neat is the same way, it only defines things that can be called but doesn't actually make any code by itself.

You'll want to @import "bourbon"; and @import "neat"; and then write css that uses the imported libraries likeā€¦

    // mystyles.scss
    @import "bourbon";

    .my-class {
      @include position(relative, 5em 2em null null);
      color: blue;
    }

As a side note, you probably don't want to be importing/using bourbon and compass at the same time. There is a bit of over lap and weird things can happen if you use them both.