Compass mixins with Gulp

Question

Is there a way to use Compass mixins with Gulp ? How to use them ?

I tried to use Compass on my Gulp project but each time I get an error with my Compass @import.

Thanks in advance !

Answer 1

It's even simpler to use compass-importer. Install it with

npm install --save-dev compass-importer

require it in your gulpfile.js and add importer: compass to sass options

var gulp = require('gulp')
var sass = require('gulp-sass')
var compass = require('compass-importer')

gulp.task('sass', function()
{
return gulp.src('sass/**/*.scss')
  .pipe(sass({ importer: compass }).on('error', sass.logError))
  .pipe(gulp.dest('./css'));

});

Answer 2

First, you need to install the npm compass-mixins package, as so:

npm install compass-mixins --save-dev

Then, add a custom pipe for it, something similar to this:

.pipe(function() {
    return $.if('*.scss', $.sass({
      outputStyle: 'nested', 
      includePaths: [
       './node_modules/compass-mixins/lib'
      ]
    }));
  })

More detailed info in this thread.