Jamie Wade Jamie Wade - 11 months ago 140
Sass (Sass) Question

File to import not found or unreadable: compass - Gulp environment

I have set up a Gulp environment, with the intention of compiling and minifying SASS with Compass.

I have created my gulpfile with all the required tasks, all my packages are installed and running, the SASS is compiling and minifying absolutely fine, until I try and add:

@import "compass";

I have Compass installed on my Mac, and the node_package is installed, but when I run the gulp task, I get this error:

error style.scss (Line 15: File to import not found or unreadable: compass

I just can't work out what the issue is here. I have seen many questions on Stackoverflow with people who are running into the same issue, and I have tried everything.

I have tried installing the
version on Compass, I have tried uninstalling Compass and SASS, and reinstalling them again, but nothing.

Here are my devDependencies in my

"devDependencies": {
"gulp": "^3.8.8",
"gulp-compass": "^1.3.2",
"gulp-concat": "^2.4.1",
"gulp-minify-css": "^0.3.10",
"gulp-ruby-sass": "^0.7.1",
"gulp-uglify": "^1.0.1",
"gulp-util": "^3.0.1"

The styles gulp task in my

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

return gulp.src('../source/sass/style.scss')
.pipe(sass({sourcemap: true, sourcemapPath: 'style.css'}))
.on('error', function (err) { console.log(err.message); })

And finally the gulp task that puts everything together:

gulp.task('default',['scripts', 'styles', 'watch']);

Any help would be greatly appreciated. As I say, everything is working fine. The watch task runs and compiles my SASS and Javascript when a change has been made. It just breaks when I try and import Compass.

Answer Source

You've installed gulp-compass, but you're not using it in your task, so it is not supposed to work.

Since you're using gulp-ruby-sass, I think you should use its compass option and set it to true, and remove the unused gulp-compass module.

Your task would look like something like this:

gulp.task('styles', function () {
  return gulp.src('../source/sass/style.scss')
    .pipe(sass({ compass: true, sourcemap: true, sourcemapPath: 'style.css'}))
    .on('error', function (err) { console.log(err.message) })