Gulp can't seem to find compass mixins

1
votes

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 compile of my scss files. I have tried using the gulp-sass, gulp-ruby-sass and gulp-compass plugins for gulp and I get pretty much the same error message every time:

error screen.scss (Line 2 of _grid.scss: Undefined mixin 'box-sizing'.)

So it looks like it is falling down as soon as it hits a compass mixin. I have ruby installed on my PC with compass version 1.0.0.alpha.19 and sass version 3.3.7.

Here is my gulpfile:

var gulp = require('gulp'),
compass = require('gulp-compass'),
sass = require('gulp-ruby-sass');

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

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

Any ideas how I tell it where my copy of compass is installed? I thought it was installed globally.

3
sassgulpcompass-sassgulp-sass
possible duplicate of Why do I get "Undefined mixin 'border-radius'" in Compass? – cimmanon
I have the lines: @import "compass/reset"; @import "compass/css3"; in my _base.scss file which is called into my screen.scss (the one that gets compiled to screen.css) before my _grid.scss file where the problem is occuring, so i don't think it is that. – El Guapo
possible duplicate: stackoverflow.com/questions/17976140/… – cimmanon
The @import compass/css3 should include the box-sizing mixin, so something else is wrong. Try taking gulp out of the equation and just compiling via Compass. From there, narrow down which parts of your Sass files are missing the mixin. – KatieK
Hi Katie, tried to compile the sass with gulp just using sass screen.scss screen.css and i get an error: Syntax error: File to import not found or unreadable: compass/reset.. So it looks like compass/sass are the problems not gulp. – El Guapo

3 Answers

4
votes

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'));

});
5
votes

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))
})
1
votes

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'));
});