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

Question

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 --pre version on Compass, I have tried uninstalling Compass and SASS, and reinstalling them again, but nothing.

Here are my devDependencies in my package.json:

"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 gulpfile.js:

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); })
        .pipe(minifyCSS())
        .pipe(gulp.dest('../public/_/'));
});

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 1

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) })
    .pipe(minifyCSS())
    .pipe(gulp.dest('../public/_/'))
})