Comments (48)
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.
from gulp-compass.
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.
from gulp-compass.
@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
from gulp-compass.
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'
})
from gulp-compass.
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'
}))
from gulp-compass.
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'));
});
from gulp-compass.
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.
from gulp-compass.
I am also getting "Individual stylesheets must be in the sass directory."
Think it might be an issue with a newer version of compass
from gulp-compass.
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);
});
from gulp-compass.
@crobays Would you mind dump project files and send to me by email?
My mail account is appleboy.tw at gmail.com
from gulp-compass.
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.
from gulp-compass.
same here
from gulp-compass.
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.
from gulp-compass.
I'm getting the same error with compass 1.0.0. Project is here, if it helps at all.
from gulp-compass.
@Gastove Thanks your project. I will try it. Could you provide sass
and compass
version?
from gulp-compass.
Yes! Apologies. I've tried compass
1.0.0 and 1.0.1, sass
3.4.4
from gulp-compass.
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]
from gulp-compass.
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 !
from gulp-compass.
@Avcajaraville I will try your file structure.
from gulp-compass.
@Gastove Thank you!!! Your suggestion works for me.
from gulp-compass.
@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 !
from gulp-compass.
@nrutman Great! I will fix the relative path.
from gulp-compass.
為什麼這個錯誤總是存在, 找不到解決的方法
from gulp-compass.
@noyobo Please try 1.3.3 version.
from gulp-compass.
@appleboy All right now, 3Q
from gulp-compass.
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 ?
from gulp-compass.
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 ...
from gulp-compass.
@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
from gulp-compass.
@mistergraphx Could you provide gulp config and file structure?
from gulp-compass.
@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
from gulp-compass.
I still have that error even I have changed configuration in config.rb
from gulp-compass.
+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.
from gulp-compass.
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');
});
from gulp-compass.
@WishCow OMG, the first thing that worked! Thanks dude!
from gulp-compass.
@WishCow Works for me too, thanks for you suggestion. 👍
from gulp-compass.
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
from gulp-compass.
Adding "sass_path = File.expand_path("..", FILE)" to the config.rb fixed this for me.
from gulp-compass.
@foxx Thanks and I'd like to +1 your suggestion for changing the defaults to use whatever is in the config file.
from gulp-compass.
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...
from gulp-compass.
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.
from gulp-compass.
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!
from gulp-compass.
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.
from gulp-compass.
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:
- Hack gulp-compass to pass file paths relative to project root (I'll fork it and propose pull request later)
- 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
from gulp-compass.
@steven-klein this work for me also, thanks.
from gulp-compass.
i get this error, when set output_style as compressed without :
output_style = compressed // get error : individual stylesheets must be in the sass directory''
from gulp-compass.
@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(
.pipe(
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
from gulp-compass.
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.
from gulp-compass.
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.
from gulp-compass.
Related Issues (20)
- Fails to pick up changes from gulp-watch HOT 3
- When assigning a css directory, the gulp.dest folder get's ignored. HOT 5
- After configuration gulpfile.js with plumper I got this error:
- 看看这个问题
- Two files exported when trying to rename filename. HOT 3
- How do you set image path without config.rb? HOT 1
- Sourcemaps not ending up in the stream
- gulp-compass - Not work HOT 1
- gulp-compass is not working in the gulp's stream paradigm HOT 4
- gulp-compass ignores gulpfile and does not update css folders when they're changed
- Error in plugin 'gulp-compass' HOT 1
- compass.rb on project directory
- "end" event
- Together with gulp-rev and gulp-sourcemaps
- Error when importing file (File to import not found or unreadable:)
- Nested rgba() inside of other function looses transparency HOT 1
- Can't make it work via config.rb
- Partials inside subfolders not getting compiled HOT 1
- "It's not clear which file to import"
- gulp-util
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gulp-compass.