gulp compass throws error

Question

I am trying to use gulp-compass plugin to convert and minify my scss into css. However I am getting below error:

$ gulp compass [02:14:32] Using gulpfile C:\Users\dell\Desktop\sassy - copy\gulpfile.js [02:14:32] Starting 'compass'... [02:14:32] Finished 'compass' after 13 ms [02:14:33] LoadError on line ["55"] of C: cannot load such file -- bourbon Run with --trace to see the full backtrace

events.js:160 throw er; // Unhandled 'error' event ^ Error: Compass failed

This is how my scss file looks like:

.scss file:

@import 'bower_components/bourbon/app/assets/stylesheets/bourbon';
@import 'bower_components/normalize-css/normalize';
@import 'bower_components/susy/sass/susy';

@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Raleway');

@import 'partials/variables';
@import 'partials/base';
@import 'partials/footer';
@import 'partials/header';
@import 'partials/layout';
@import 'partials/modules';

Following is gulpfile.js:

var gulp = require('gulp'), 
    compass = require('gulp-compass'),
    minifyCSS = require('gulp-minify-css');

gulp.task('compass', function() {
  gulp.src('assets/scss/styles.scss')
    .pipe(compass({
      sass: 'assets/sass',
      image: 'images',
      require:['bourbon', 'normalize','susy']
       }))
    .pipe(minifyCSS())
    .pipe(gulp.dest('css'));
});

I guess its not letting plugins like bourbon, normalize,susy to compile and convert. I might have done some wrong configuration I guess.

Tried installing gems but throws the following error:

gem install susy

gem install bourbon

c:\Users\Dell\Desktop\sassy - Copy>gulp compass
[23:23:59] Using gulpfile c:\Users\Dell\Desktop\sassy - Copy\gulpfile.js
[23:23:59] Starting 'compass'...
[23:23:59] Finished 'compass' after 14 ms
    error assets/sass/styles.scss (Line 1: File to import not found or unreadable: bower_components/bourbon/app/assets/stylesheets/bourbon.
Load paths:
  Compass::SpriteImporter
  c:/Users/Dell/Desktop/sassy - Copy/assets/sass
  C:/Ruby24/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets
  C:/Ruby24/lib/ruby/gems/2.4.0/gems/susy-2.2.12/sass
  C:/Ruby24/lib/ruby/gems/2.4.0/gems/bourbon-4.3.4/app/assets/stylesheets)

Compilation failed in 1 files.


events.js:160
      throw er; // Unhandled 'error' event
      ^
Error:     error assets/sass/styles.scss (Line 1: File to import not found or unreadable: bower_components/bourbon/app/assets/stylesheets/bourbon.
Load paths:
  Compass::SpriteImporter
  c:/Users/Dell/Desktop/sassy - Copy/assets/sass
  C:/Ruby24/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets
  C:/Ruby24/lib/ruby/gems/2.4.0/gems/susy-2.2.12/sass
  C:/Ruby24/lib/ruby/gems/2.4.0/gems/bourbon-4.3.4/app/assets/stylesheets)
Compilation failed in 1 files.

aristotll aristotll · Accepted Answer · 2017-08-23T11:29:16

The reason is quite simple, the required are Ruby gems, not bower or node libraries.

From the doc,

Require the given Ruby library before running commands. This is used to access Compass plugins without having a project configuration file.

If you do not install the Ruby gems, you can require them.

gem install  susy
gem install bourbon

It seems normalize-css does not have a Ruby gem.

The new error:

This question may help you Why is Compass is giving me an import error when trying to import partials, you need to use relative path, otherwise It will search the required Ruby gem path.(I think you have bower packages installed).

So changes @import 'bower_components/bourbon/app/assets/stylesheets/bourbon'; to

@import './bower_component/.. and all things alike.

gulp compass throws error

1 Answers