Gulp can't seem to find compass mixins

Question

I am trying out gulp as an alternative build tool to Grunt, to compile my scss to css, as I have heard it can be much faster.

I having problems doing even a basic co

Answer 1

There is bit of confusion around using Compass with Gulp. There are three gulp extensions: gulp-ruby-sass, gulp-compass and gulp-sass. They basically do the same thing. They compile SASS to CSS. But:

• gulp-ruby-sass: Is a wrapper around command line tool: sass that comes with the language. It is written in Ruby and it is installed via gem - Ruby's package manager.

• gulp-compass: Is a wrapper around command line tool: compass that comes with Compass framework. It is written in Ruby and it is also installed via gem. However, Compass is just a framework. It consists of SASS files only. All that compass command do, is setting paths to framework SASS files to sass command so that Compass dependencies are being resolved.

• gulp-sass: Is a wrapper around tool: node-sass which is Node.JS binding to libsass: a C/C++ implementation of a Sass compiler.

The above answers did not work for me since I am using gulp-sass. It does not see Compass files out of the box. So first I installed compass-mixins (SASS files of Compass framework) and later I imported them with compass-importer:

import compass from 'compass-importer';
import sass from 'gulp-sass';

gulp.task('styles', function () {
  return gulp.src(config.styles.src)
    .pipe(sass({
      importer: compass
    })
    .pipe(gulp.dest(config.styles.dest))
})

Answer 2

You right, compass should be installed globally on your system to get this work, at least easily. I recommend you to uninstall sass and compass to get something clean using

gem uninstall sass && gem uninstall compass

And then re-install them with :

gem install sass
gem install compass --pre

And after you can define a gulp task like so

gulp.task('compass', function () {

  return gulp.src('../sass/UK/screen.scss')
    .pipe(sass({ compass: true, sourcemap: true, style: 'compressed' }))
    .pipe(gulp.dest('../css/UK/screen.css'));

});

Answer 3

Notice that gulp-ruby-sass has a new syntax which should look like:

gulp.task('compass', function () 
  sass(../sass/UK/screen.scss, { compass: true, sourcemap: true, style: 'compressed' })
  .pipe(gulp.dest('../css/UK/screen.css'));
});