"Individual stylesheets must be in the sass directory."

[maikelvl]

Getting an error and I don't know if or what I do wrong:

Individual stylesheets must be in the sass directory.

events.js:72 throw er; // Unhandled 'error' event ^ Error: Compass failed

gulpfile.js:

gulp.task('sass', function() {
    return gulp.src('assets/sass/**/*')
        .pipe(compass({
            config_file: '../config.rb',
            project: __dirname+'/assets',
            css: 'css',
            sass: 'sass'
        }))
        .pipe(gulp.dest('public'));
});

config.rb:

http_path = '/'
project_path = '../assets'
css_dir = 'css'
sass_dir = 'sass'
scss_dir = 'sass'
javascript_dir = 'scripts'
fonts_dir = 'fonts'
images_dir = 'images'
add_import_path = '../bower_components'

file system:

|-- assets
|   |-- css
|   |   |-- style.css
|   |   `-- style.css.map
|   |-- fonts
|   |   |-- varelarnd-regular.otf
|   |   `-- varelarnd-regular.ttf
|   |-- images
|   |   `-- logo.png
|   |-- sass
|   |   |-- _foundation.scss
|   |   |-- _foundation_settings.scss
|   |   `-- style.sass
|   `-- scripts
|       `-- script.js
|-- bower.json
|-- config.rb
|-- gulpfile.js
`-- public
    |-- index.html
    |-- script.js
    |-- script.min.js
    |-- style.css
    `-- style.min.css

Sass 3.4.0.rc.3 Compass 1.0.0.rc.1 (Polaris) Gulp 3.8.7 Gulp-compass 1.3.0

[appleboy]

You have wrong path with config.rb. Please try config_file: 'config.rb'

config.rb:

http_path = '/'
project_path = 'assets'
css_dir = 'css'
sass_dir = 'sass'
scss_dir = 'sass'
javascript_dir = 'scripts'
fonts_dir = 'fonts'
images_dir = 'images'
add_import_path = '../bower_components'

gulp config

gulp.task('sass', function() {
  return gulp.src('assets/sass/**/*')
    .pipe(compass({
      config_file: 'config.rb',
      project: __dirname+'/assets',
      css: 'css',
      sass: 'sass'
    }))
    .pipe(gulp.dest('public'));
});

[maikelvl]

The config_file is relative to the project path, because now I get an error of

Configuration file, config.rb, not found or not readable.

[computmaxer]

I am also getting "Individual stylesheets must be in the sass directory."

Think it might be an issue with a newer version of compass

[tuckerconnelly]

I fixed this by getting rid of gulp-compass altogether and using a plain 'ol node compass wrapper: https://www.npmjs.org/package/compass

The gulp task is muuuuch simpler, too, using a config.rb:

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

gulp.task('compass', function(cb) {
    compass.compile(cb);
});

Edit:

I needed source maps, so I just went straight for exec:

var gulp = require('gulp');
var exec = require('child_process').exec;

gulp.task('compass', function(cb) {
    var debug = global.dev ? ' -d' : '';
    exec('compass compile'+debug, cb);
});

[appleboy]

@crobays Would you mind dump project files and send to me by email?

My mail account is appleboy.tw at gmail.com

[joostfarla]

I'm getting the same errors since I've upgraded Compass to v1.0.1. Before, the task was running fine.

Could be related to https://github.com/Compass/compass/issues/1769.

[atinder]

same here

[ksubileau]

Remove opts.project || at line 112 seems to fix the issue in my case, but I don't know if it's the right way to do it.

[Gastove]

I'm getting the same error with compass 1.0.0. Project is here, if it helps at all.

[appleboy]

@Gastove Thanks your project. I will try it. Could you provide sass and compass version?

[Gastove]

Yes! Apologies. I've tried compass 1.0.0 and 1.0.1, sass 3.4.4

[Nevitones]

In my case, the fix was remove the "." from sass folder at config.rb and gulpfile.js compass options. so the "./sass" became "sass" source: https://twitter.com/kandrejevs/status/508884526336991232

sass (3.4.4) compass (1.0.1) [email protected] [email protected]

[Gastove]

Yep. @Nevitones suggestion fixed it for me also. This seems to only effect places with a sass option -- so the gulp task:

gulp.task('compass', function() {
    return gulp.src('./js/sass/*.scss')
        .pipe(compass({
            config_file: './compass.rb',
            css: './build/stylesheets',
            sass: './js/sass'
        }))
        .on('error', handleErrors);
});

only changes to:

gulp.task('compass', function() {
    return gulp.src('./js/sass/*.scss')
        .pipe(compass({
            config_file: './compass.rb',
            css: './build/stylesheets',
            sass: 'js/sass'  // removed the dot-slash from here
        }))
        .on('error', handleErrors);
});

Likewise, in my compass.rb, it only seems to be the sass_dir option that's impacted.

[Avcajaraville]

Totally stuck with this issue. Is the only thing that is stopping me from having my dreamed workflow.

Im not able to make a gulp compass task that behaves as I expect.

Giving the following enviroment:

sass: Sass 3.4.5 (Selective Steve) compass: Compass 1.0.1 (Polaris) on MAC OS

This is my file structure:

|-- front-end
|   |-- scss      // Contains subfolder with partials and main .scss
|   |-- config.rb
|   `-- gulpfile.js
|
`-- web           // Public folder of my app 
    | 
    `-- css       // Folder where all generated .css should be

This is my config.rb:

project_path = "./"
http_path = "/"
css_dir = "../web/css"
sass_dir = "scss"
images_dir = "../web/img"
fonts_dir = "../web/fonts"
generated_images_dir = "../web/img/generated"
images_path = "../web/img"
relative_assets = true
line_comments = true

This is my gulfpfile.js

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

gulp.task('sass', function() {
  return gulp.src('scss/**/*')
    .pipe(compass({
      config_file: 'config.rb',
      project_path: 'front-end',
      css: '../web/css',
      sass: './scss'
    }).on('error', errorHandler))
    .pipe(gulp.dest('../web/css'));
});

Tried all solutions posted here, no success at all. Always getting the following error:

    [XX:XX:XX] Individual stylesheets must be in the sass directory.

    Error in plugin 'gulp-compass'
    Message:
        Compass failed
    Details:
        fileName: PATH_TO_FILE

Have to use some tweaks (like somebody who saids he commented this part on compass js -> options.push(file_path); (line 70)

But anyway, no way to make it work. This is almost the same example thats on the github page. How do you guys use gulp-compass ? I really would love to have this working.

Thanks a lot !

[appleboy]

@Avcajaraville I will try your file structure.

[limdauto]

@Gastove Thank you!!! Your suggestion works for me.

[Avcajaraville]

@appleboy Really looking forward for your feedback !

Plus, I also have found very large compilation time for a structure with 40+ sccs (with partials).

Thanks !

[nrutman]

I experienced this problem because I was trying to use relative directories for scss and css like ../style/css. My solution was to set project to something like path.join(__dirname, '../') and then use directories like style/css for the scss and css property. That worked great.

So in short, use project to traverse to the correct root directory, then use the scss (etc.) directories to go from there. Setting debug: true also helped me troubleshoot my issue.

[appleboy]

@nrutman Great! I will fix the relative path.

[noyobo]

為什麼這個錯誤總是存在, 找不到解決的方法

[appleboy]

@noyobo Please try 1.3.3 version.

[noyobo]

@appleboy All right now, 3Q

[mistergraphx]

Hi, sorry to add an issue even you 've closed, but i got the same error message, suspecting an extra path added in my config.rb causing this error :

The error message

[11:52:41] Individual stylesheets must be in the sass directory.
[11:52:41]

{ [Error: Compass failed]
  message: 'Compass failed',
  fileName: '/Users/macbook/Sites/test_compass/Jekyll/web-starter-kit/assets/_sass/main.scss',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-compass',
  __safety: { toString: [Function] } }

i've updated to the latest gulp compass package and gems, and tried all the solutions mentioned here, but with no success. Any idea ?

[noyobo]

@mistergraphx I have met the same problem so I wrote one such demo, hope to help you https://github.com/noyobo/gulp-compass-demo/tree/master

[mistergraphx]

yep, thx for sharing ... it's work fine when the config.rb is near my gulp file (like in your demo). but i've multiple projects/themes and i share the gulps tasks between them : so each one 've a dedicated config.rb in it's folder.

Maybe it's not possible to do what i want ...

[noyobo]

@mistergraphx config.rb not required, Maybe you don't need config.rb

So, I created this repo https://github.com/noyobo/gulp-compass-compile fast create a compass

[appleboy]

@mistergraphx Could you provide gulp config and file structure?

[mistergraphx]

@noyobo : ok i'm gonna test today without a config.rb

@appleboy Yes, shure thx:

File structure:

/Working_dir
 | -> / gx-recipies (Shared sass components)
 |-> / ...
 |-> /Jekyll 
             |-> Web-Starter-kit
                      |-> /assets
                            |-> /_sass
                            |-> /css
                            |-> /js
                           |-> config.rb
                           |-> bower.json ....
              |-> Project_2
 |->gulp.js

---

gulp.js

// -----------------------------------------------------------
// Project Configuration
// -----------------------------------------------------------
var project = {
    'SrcPath' : 'Jekyll/web-starter-kit/',
    'BuildPath': 'Jekyll/web-starter-kit/_build/',
    'JsPath':'assets/js',
    'ImagePath':'assets/images',
    'sassPath':'assets/_sass'
}



/* # COMPASS

https://www.npmjs.org/package/gulp-compass

@state - error : Individual stylesheets must be in the sass directory.
*/
gulp.task('compass', function() {
  gulp.src(project.SrcPath + project.sassPath+'/*.scss')
        .pipe($.plumber({
            errorHandler: onError
        }))
  .pipe($.compass({
    config_file: project.SrcPath + 'config.rb',
    project:  project.SrcPath,
    css: 'css',
    sass: '_sass',
    debug:true
  }))
  .pipe(gulp.dest(project.SrcPath + '/assets/css/test'));
});

---

Config.rb

# REQUIRE ----------------------------------------------------------------------
# Require any additional compass plugins here.

require 'compass/import-once/activate'
require 'breakpoint'
require 'susy'

# PROJECT PATHS ---------------------------------------------------------------
# Set this to the root of your project when deployed:

http_path = "/"
project_path = 'assets'
css_dir = "css"
sass_dir = "_sass"
images_dir = "images"
javascripts_dir = "js"
fonts_dir = "fonts"

# SPRITES & IMAGES -------------------------------------------------------------
# To enable relative paths to assets via compass helper functions. Uncomment:

relative_assets = true

#http_images_path = "http://127.0.0.1/~macbook/"

# FRAMEWORKS -------------------------------------------------------------------

# Additional path
# add_import_path "/Users/macboook/Sites/test_compass/gx-components/stylesheets/"

additional_import_paths = [
    "/Users/macbook/Sites/test_compass/gx-recipies/sass/"
]

# OUTPUT -----------------------------------------------------------------------
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed


# SASS -------------------------------------------------------------------------
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

sass_options = {:sourcemap => true}

# AUTO-PREFIXER ----------------------------------------------------------------
require 'autoprefixer-rails'

on_stylesheet_saved do |file|
  css = File.read(file)
  File.open(file, 'w') do |io|
    io << AutoprefixerRails.process(css, browsers: ['> 1%','last 2 versions','Firefox ESR','Opera 12.1'])
  end
end

---

[ningo-agilityio]

I still have that error even I have changed configuration in config.rb

[fracz]

+1 same here, unix only, windows ok

When I turn on the debug mode of gulp-compass it tells me that it is running the following command:

[12:36:45] gulp-compass: Running command: /usr/local/bin/compass compile  /path/to/my/sass/style.scss --no-line-comments --relative-assets --debug-info --output-style nested --css-dir /path/to/my/css --sass-dir /path/to/my/sass

And it fails with the "Individual stylesheets..." error.

However, when I run the command from debug in the prompt, it compiles the styles flawlessly.