Compass failed: You must compile individual stylesheets from the project directory.

[appleboy]

Compass failed: You must compile individual stylesheets from the project directory.

[mikecfisher]

I'm having the same issue as well. My config.rb is almost identical.

[appleboy]

I will try it.

[gil]

I've had the same problem, my gulp.src(...) path didn't have any .scss or .sass file. It might help you!

[typeoneerror]

Same here. Adding http_path to the list of options would be crucial. Really the only reason I am using config.rb.

[kwaledesign]

I've just converted over to Gulp from Grunt and I'm running into this. If anyone's had success, I'd greatly appreciate a quick note outlining your solution.

[nicky-lenaers]

Same here, converted from Grunt to Gulp and not able to run it correctly. Installed Compass again but no luck.

[typeoneerror]

Here is my current working solution. Keep in mind this is with a locked version of gulp-compass 1.1.7:

config.rb

# includes
require "sass-globbing"

# path to source files
project_path = "source"

# no path added to assets by default
http_path = "./"

# have to match gulp-compass settings
sass_dir = "styles"
css_dir="build/styles"
fonts_dir="fonts"

# options that don't get used by gulp-compass
comments = true
output_style = :expanded
relative_assets = false

gulpfile.js

// Compiles sass files to css
gulp.task('styles', ['clean-styles'], function() {
  var compass_options = {
      config_file: 'config.rb'
    , bundle_exec: true
    , project: path.join(__dirname)
    , sass: 'source/styles'
    , css: 'source/build/styles'
    , font: 'source/fonts'
  };
  var minify_options = {
  };
  return gulp.src(paths.styles)
    .pipe(plumber())
    .pipe(compass(compass_options))
    .pipe(gulp.dest(paths.styles_compiled))
    .pipe(minifyCSS(minify_options))
    .pipe(gulp.dest(paths.theme_dir))
    .on('error', function(error) {
      // let gulp show the error
    })
    .on('end', function() {
      log('"styles" task complete');
    });
});

You'll not that the project path is different between the two. Not ideal, but this is how the plugin seems to be designed.

[uberspeck]

@typeoneerror, would it be possible to share the directory structure for your app? I'm finding it hard to visualize the correlations between the config.rb and gulpfile.js paths...

[kwaledesign]

@typeoneerror @uberspeck +1 please!

[typeoneerror]

@kwaledesign @uberspeck no problem...

Looks something like this. "source" is my "compass" folder and gulpfile and config live at the same level as that one. Here's the full gulpfile.

config.rb
gulpfile.js
source
    `- build
    `- fonts
    `- images
    `- styles
    `- scripts
    `- vendor

I'm having the same issue. Compass itself is working perfectly but no matter what changes I make to gulpfile.js, I just can't seem to get rid of this error. Any help would be appreciated.

config.rb:

http_path = "/"
css_dir = "themes/keith/static/css/"
sass_dir = "rbp/sass/"

gulpfile.js

gulp.task('sass', function (cb) {
    gulp.src('./rbp/sass/*.scss')
    .pipe(compass({
        config_file:    'config.rb',
        css:            './themes/keith/static/css/',
        scss:           './rbp/sass/'
    }))
    .pipe(gulp.dest('./themes/keith/static/css'))
    .on("end", cb);
});

[jdcauley]

Has anyone figured this out at all?

[typeoneerror]

@TSyn @jdcauley did you see my post above? essentially, your "project_path" in the config.rb needs to point to a different location than your "project" setting in gulp. Have a look at my setup and the directory structure to see how I got it to work.

@typeoneerror I tried it but perhaps I didn't do it quite right. I'll try again but the whole thing seems to be overly complicated. A simpler solution to this entire endeavour would be to just to run compass compile on file change

[josephvano]

I ran into this error and solved it by making sure my directory paths from src are the same case sensitivity as my actual machine. I'm on windows so some developers use uppercase and I wasn't doing that for my src ... so I changed it to exactly how it is on the filesystem.

e.g., I was pathing to "myproject/content" when I changed it to "MyProject/Content" it was all working.

gulp.task('compass', function(){
  var options = {
    config_file : 'config.rb',
    css         : 'MyProject/Content',
    sass        : 'MyProject/Content/sass',
    image       : 'MyProject/Images',
    javascript  : 'MyProject/Scripts'
  };

  return gulp.src('./MyProject/Content/sass/*.sass')
          .pipe(compass(options))
          .pipe(gulp.dest('./MyProject/content/'));
});

[plevavas]

I haven't issue with compass 0.12. My configuration works.

Today, i've updated to compass 1.0.0.rc.1. Without any modification on the configuration, i have this issue too. And i can compile with compass command line.

This is my task:

gulp.task('compass:compile', function() {
    return gulp.src('./src/styles/*.sass')
        .pipe(compass({
            config_file: 'config.rb',
            sass: './src/sass',
            css: './src/styles',
            generated_images_dir: './src/images',
            debug: true
        }));
});

If i ran in debug mode, gulp ran this command :
Running command: /usr/bin/compass compile /PATH/frontend/client /PATH/frontend/client/src/styles/style.sass -c config.rb --relative-assets --debug-info --output-style nested --css-dir ./src/styles --sass-dir ./src/styles

If i comment the line 70 on compass.js file, like this :

...
options.push('compile');

if (process.platform === 'win32') {
  options.push(opts.project.replace(/\\/g, '/'));
} else {
  options.push(opts.project);
}
//options.push(file_path); <= I comment this line ;)

// set compass setting
...

Now, it works :)

[SleepWalker]

I have fixed this a little bit differently:
I use compass 1.0.0.rc.1 too

The problem appears not only because of line 70, as mentioned @plevavas. It is also apears because of gulp-compass tries to copy css file from sass directory to css directory. But there is no such file there! And the compiled css file, actually, generates in the right place, so I can't understand why this task tries to copy it from the place, where it shouldn't be.

To fix this, i commented lines 41-52 in index.js file:

      // excute callback
      var pathToCss = gutil.replaceExtension(path, '.css'),
        contents = fs.readFileSync(pathToCss);

      // Fix garbled output.
      if (!(contents instanceof Buffer)) {
        contents = new Buffer(contents);
      }

      file.path = gutil.replaceExtension(file.path, '.css');
      file.contents = contents;
      this.push(file);

Now, it works :)

btw, my config.rb file:

http_path = "../"
project_path = "build"
cache_path = ".sass-cache"
css_dir = "css"
sass_dir = "sass"
images_dir = "build/images"
javascripts_dir = "build/js"

[tuckerconnelly]

I fixed this by using https://www.npmjs.org/package/compass.

See my comment on the dupllicate issue: #61 (comment)

[SleepWalker]

gulp-sass works great too (there is compass support built-in)

[Avcajaraville]

@SleepWalker How can you archive compass built-in support with gulp-sass ?

As far as I know gulp-sass works with node-sass, and node-sass use libsass, the C version of sass, while compass is written in Ruby... so I think there is no compass support.

If Im wrong, can you tell my how you made this ?

[SleepWalker]

@Avcajaraville oh, excuse me. I meant gulp-ruby-sass: https://github.com/sindresorhus/gulp-ruby-sass

[atinder]

thanks @SleepWalker

[appleboy]

Everybody please try 1.3.3 version.