"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 Compass/compass#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)
gulp@3.8.7
gulp-compass@1.3.1

[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.

[miguelmota]

Kept getting "Individual stylesheets must be in the sass directory",

so I just resorted to:

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

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

[WishCow]

I fixed it by using fs.realPath in "project", so I went from this:

gulp.src('src/scss/*.scss')
.pipe(compass({
    project: __dirname + '/..',
    sass: 'src/scss',
    css: 'build'
})

to this:

gulp.src('src/scss/*.scss')
.pipe(compass({
    project: fs.realpathSync(__dirname + '/..'),
    sass: 'src/scss',
    css: 'build'
})

[thealjey]

@WishCow OMG, the first thing that worked! Thanks dude!

[adrn01]

@WishCow Works for me too, thanks for you suggestion. 👍

[steven-klein]

I found that the sass and css path's in my config.rb and gulpfile.js needed to be different:

So given these paths in my config.rb (located in assets/styles/):

css_dir = "stylesheets"
sass_dir = "sass"

My gulpfile.js (located in the root directory) looked like this:

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

Versions:
gulp v3.8.11
compass v1.0.3
npm v2.7.4
node v0.12.2

[mtwalsh]

Adding "sass_path = File.expand_path("..", FILE)" to the config.rb fixed this for me.

[foxx]

I came across this issue today, although my fix was slightly different.

It would seem that 'css' and 'sass' options are mandatory, and are not automatically read from the config.rb. The reason it shows the error is because the default for those two options is ./css and ./sass, and because no files were contained within that dir, it caused a problem.

I'd like to suggest that gulp-compass should change its defaults to use whatever is inside the config_file, rather than what it is now. I'm not even sure why it has to be specified twice (once in config.rb, and once in gulp.js). @appleboy Could you give your thoughts on this?

This works;

    gulp.src('./app/sass/**/*.scss')
      .pipe(compass({
        config_file: 'compass.rb',
        css: './app/css',
        sass: './app/sass'
      }))

This does not

    gulp.src('./app/sass/**/*.scss')
      .pipe(compass({
        config_file: 'compass.rb'
      }))

[mtpultz]

@foxx Thanks and I'd like to +1 your suggestion for changing the defaults to use whatever is in the config file.

[chaosClown]

i came across the same issue using @foxx solution fixed it +1 for his sugesstion!

i also want to point out that some other defaults are twisted:
comments should be true by default
relative should be false by default

a preferred_syntax option would be also a good thing...

[afoeder]

Well in my case it pretty simply boils down to this; thanks for alle the comments which eventually helped me out.

The following configuration:

gulp.task('icons.sass', function() {
    gulp.src('../Packages/Application/Acme/Resources/Private/Styles/Icons.scss')
        .pipe(compass({
            css: '../Web/_Resources/Built/Styles/',
            sass: '../Packages/Application/Acme/Resources/Private/Styles/'}))});

results in the following command executed (each argument in a new line for better readability):

/usr/bin/compass compile
    /Users/afoeder/PhpstormProjects/acme/Distribution/Build
    /Users/afoeder/PhpstormProjects/acme/Distribution/Packages/Application/Acme/Resources/Private/Styles/Icons.scss
    --no-line-comments
    --relative-assets
    --debug-info
    --css-dir ../Web/_Resources/Built/Styles/
    --sass-dir ../Packages/Application/Acme/Resources/Private/Styles/

so, while the compass CLI itself seems to work fine with relative paths for the --css-dir argument, it seems it fails for rel. paths for the sass-dir arg.
As mentioned above, changing the respective configuration line to

sass: fs.realpathSync(__dirname + '/..') + '/Packages/Application/Acme/Resources/Private/Styles/'

resulted in

--sass-dir /Users/afoeder/PhpstormProjects/acme/Distribution/Packages/Application/Acme/Resources/Private/Styles/

which works as expected.

[kolia-kaploniuk]

tuckerconnelly, thank you! All day i was trying to compile my files with gulp-compass, in the evening i tried to do it with node.js compass. It works, thank you!

[coderatchet]

WHY? Here's how it works:

for those finding these pages and getting confused about what is happening, let me show you an excerpt from the compass ruby-based compiler:

class Compass::SassCompiler
    ...
    def corresponding_css_file(sass_file)
        "#{config.css_path}/#{stylesheet_name(sass_file)}.css"
    end

    def stylesheet_name(sass_file)
        if sass_file.index(config.sass_path) == 0
            sass_file[(config.sass_path.length + 1)..-6].sub(/\.css$/,'')
        else
            raise Compass::Error, "Individual stylesheets must be in the sass directory."
        end
    end
    ...
end

config is the config.rb file

When attempting to create the output css file, the compiler needs to know what to call it. it also needs to place the file in the proper hierarchy (hence why it can't simply obtain the file's basename). therefore it attempts to find the index of config.sass_path in the sass_file and switch out the .scss with a .css.

sass_path is set in compass when sass-dir is an absolute path name otherwise sass_dir is set. This is why @afoeder's suggestion works. see the excerpt below:

module Compass::Exec::ProjectOptionsParser
    ...
    def set_dir_or_path(type, dir)
        if Pathname.new(dir).absolute?
            self.options[:"#{type}_path"] = dir.tr('\\','/')
        else
            self.options[:"#{type}_dir"] = dir.tr('\\','/')
        end
    end
    ...
    opts.on('--sass-dir SRC_DIR', "The source directory where you keep your sass stylesheets.") do |sass_dir|
        set_dir_or_path(:sass, sass_dir)
    end
    ...
end

I hope this helps future people debug the issue.

I'm reading this from compass 1.0.3 source code.

[e1himself]

I had the same issue.
It looks like compass checks if given sass file path starts with sass-dir option value, otherwise it fails.
As this plugin passes file's absolute path, though actually it points inside that dir, it does not start with sass-dir value, so it fails.

Solution:

1. Hack gulp-compass to pass file paths relative to project root (I'll fork it and propose pull request later)
2. If you have your compass project root deeper than gulpfile, set sass_dir relative to it. This works for me:

   gulp.src('web/backend/stylesheets/*.scss')
      .pipe(compass({
            config_file: 'web/backend/config.rb',
            css: 'web/backend/css',
            sass: 'web/backend/stylesheets',
            relative: true
        }));

Related: #82

[ZimmerHao]

@steven-klein this work for me also, thanks.

[nfort]

i get this error, when set output_style as compressed without :

output_style = compressed // get error : individual stylesheets must be in the sass directory''

[andresbiso]

@appleboy I keep getting the error "Individual stylesheets must be in the sass directory.":

• gulp - build.js:

gulp.task('styles', ['clean'], function () {
return gulp.src([
config.appStyleFiles,
'!' + config.appComponents
])
.pipe($.plumber({errorHandler: function (err) {
$.notify.onError({
title: 'Error linting at ' + err.plugin,
subtitle: ' ', //overrides defaults
message: err.message.replace(/\u001b[.*?m/g, ''),
sound: ' ' //overrides defaults
})(err);
this.emit('end');
}}))
.pipe($.compass({
config_file: 'config.rb',
css: 'css',
sass: 'sass'
}))
.pipe($.autoprefixer())
.pipe($.if(isProd, $.cssRebaseUrls()))
.pipe($.if(isProd, $.modifyCssUrls({
modify: function (url) {
// determine if url is using http, https, or data protocol
// cssRebaseUrls rebases these URLs, too, so we need to fix that
var beginUrl = url.indexOf('http:');
if (beginUrl < 0) {
beginUrl = url.indexOf('https:');
}
if (beginUrl < 0) {
beginUrl = url.indexOf('data:');
}

      if (beginUrl > -1) {
        return url.substring(beginUrl, url.length);
      }

      // prepend all other urls
      return '../' + url;
    }
  })))
  .pipe($.if(isProd, $.concat('app.css')))
  .pipe($.if(isProd, $.cssmin()))
  .pipe($.if(isProd, $.rev()))
  .pipe(gulp.dest(config.buildCss));

});

• config.rb:

require 'compass/import-once/activate'

http_path = '/'
project_path = 'src/client/styles'
css_dir = 'css'
sass_dir = 'sass'
scss_dir = 'sass'
fonts_dir = '../assets/fonts'
images_dir = '../assets/images'
add_import_path = '../bower_components'
relative_assets = true

• File System:

|-- bower_components
|-- node_modules
|-- src
| |-- client
| | |-- app
| | |-- styles
| | | |--css
| | | |--sass
| | |-- assets
| | | |--fonts
| | | |--images
|package.json
|bower.json
|config.rb
|gulpfile.js

[kevinmamaqi]

I've been trying to fix this and can't figure out how to do it. I got the following compass task:

gulp.task('compass', function() {
  gulp.src(themeDir + '/assets/scss/*.scss')
  .pipe(plumber(plumberErrorHandler))
    .pipe(compass({
      config_file: themeDir + '/config.rb',
      css: '/assets/css',
      sass: '/assets/scss',
    }))
    .on('error', function(err) { console.log(err) })
    .pipe(gulp.dest(themeDir + '/assets/css'))
    .pipe(livereload());
});

With the following directory structure:

wp-gulp-automation
_gulpfile.js
buscopreparador
_assets/scss/*.scss
_assets/scss/*.css

I've been trying many solutions, but can not figure out how to solve this.

[CountZero1981]

Today I also had such an error. I debugged it and found the reason. By mistake, I put file named plugin.scss to one of the subdirectories. but subdirectories has to contain only files named _plugin.scss, i. e. includes.