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.
The reason is quite simple, the required are Ruby gems, not bower or node libraries.
From the doc,
If you do not install the Ruby gems, you can require them.
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.