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 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.

possible duplicate of [Why do I get "Undefined mixin 'border-radius'" in Compass?](http://stackoverflow.com/questions/15422098/why-do-i-get-undefined-mixin-border-radius-in-compass) — cimmanon, Jul 14 '14 at 23:43
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, Jul 15 '14 at 16:17
possible duplicate: http://stackoverflow.com/questions/17976140/false-positive-undefined-variable-error-when-compiling-scss — cimmanon, Jul 15 '14 at 16:44
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, Jul 15 '14 at 19:11
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, Jul 22 '14 at 19:01

score 5 · Answer 1 · answered Oct 27 '16 at 19:26

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

Can you please explain a bit more? Where is this code written - inside gulpfile.js? I have the exact issue which falls in the category you described but I cannot figure out how to use `compass-mixins`. I was using the `gulp-saas` part from [this resource](https://github.com/haithembelhaj/compass-importer). — Souvik Ghosh, Nov 24 '17 at 15:43
Ok, I figured it out, I had to use `@import "compass";` in my .scss (saas source file) as the first line and then everything fell in place. Logging this here just in case it helps anyone facing similar issues. — Souvik Ghosh, Nov 24 '17 at 16:20

score 4 · Accepted Answer · answered Jul 19 '14 at 11:31

4

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

});

answered Jul 19 '14 at 11:31

Preview

35,317
10
92
112

That's exactly what i did when i installed compass and sass (well i didn't need to install sass individually as it is installed as a dependency of compass). Now if i do `compass -v` or `sass -v` anywhere on the c: drive where it is installed it returns the version number so it is something else. – El Guapo Jul 21 '14 at 14:27
The option `--pre` of the `gem install compass` is really important, have you done that ? – Preview Jul 21 '14 at 14:29
yep `gem install compass --pre` exactly as you say. I have compass version 1.0.0.alpha.19 installed and sass 3.3.7 installed as a dependency of that compass install. – El Guapo Jul 22 '14 at 18:59
Ha, me being stupid. I added in compass: true and it worked fine. Thanks for your help Aperçu. – El Guapo Aug 10 '14 at 21:43
It happens, don't blame you, glad that helped ! :) – Preview Aug 10 '14 at 21:45

score 1 · Answer 3 · answered Sep 16 '15 at 05:59

1

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

answered Sep 16 '15 at 05:59

Echo Yang

470
5
12

Gulp can't seem to find compass mixins

3 Answers3

Linked