Search code examples
compass-sassgulp

Gulp error with gulp-compass : You must compile individual stylesheets from the project directory


I try to run a gulp task to compile my sass project but since I create subfolder app/assets/ and put my sources files into it, I have a issue. Before when sass and css folder was in the same directory than my gulpfile it was running perfectly. And if I run a compass watch command on my base directory I have no issue, this is only with gulp-compass.

The output :

Devnco: /Users/Devnco/Web/maquette ->gulp sass
[gulp] Using gulpfile ~/Web/maquette/gulpfile.js
[gulp] Starting 'sass'...
[gulp] Finished 'sass' after 6.12 ms
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed

My gulpfile.js :

var paths = {
    css: './app/assets/css',
    sass: './app/assets/sass/*.scss',
    js: './app/assets/js',
    images: './app/assets/images'
}

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

    gulp.src(paths.sass)
        .pipe(plumber())
        .pipe(compass({
            css: paths.css,
            sass: paths.sass
        }))
        .pipe(gulp.dest(paths.css))
        .pipe(minifyCss())
        .pipe(rename({ extname: '.min.css'}))
        .pipe(gulp.dest(paths.css));
});

My working directory :

gulpfile.js
app/
    assets/
        fonts/
        images/
        sass/
        css/
    pages/
        etc…

And my package.json with the versions that I use (lastest)

"devDependencies": {
  "gulp": "^3.6.2",
  "gulp-compass": "^1.1.9",
  "gulp-concat": "^2.2.0",
  "gulp-minify-css": "^0.3.4",
  "gulp-plumber": "^0.6.2",
  "gulp-rename": "^1.2.0"
}

I made some searches but not still not found where is the problem.

Thanks in advance.


Solution

  • I use this to compile my compass file and it works fine, it comes right from the gulp-compass docs

    if you are not using config.rb

    var compass = require('gulp-compass'),
      path = require('path');
    
    gulp.task('compass', function() {
      gulp.src('./src/*.scss')
      .pipe(compass({
        project: path.join(__dirname, 'assets'),
        css: 'css',
        sass: 'sass'
      }))
      .pipe(gulp.dest('app/assets/temp'));
    });
    

    if you are using config.rb

    var compass = require('gulp-compass');

    gulp.task('compass', function() {
      gulp.src('./src/*.scss')
      .pipe(compass({
        config_file: './config.rb',
        css: 'stylesheets',
        sass: 'sass'
      }))
      .pipe(gulp.dest('app/assets/temp'));
    });