Grunt watch throws NoMethodError - css

Question

I've read the grunt, sass, and compass documentation but can't find much about this error. I also saw another person with a similar error but it was due to syntax problems in their contrib.rb file, which I don't believe I have in my contrib.rb file.
Problem: I run the grunt watch task and get an error anytime I make a change to my sass (*.scss) files.
The error reads as follows:
NoMethodError on line 264 of /Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/configuration/inheritance.rb: _
Run with --trace to see the full backtrace
As a result, none of my sass files are processing to my css folder. I'm new to grunt and am admittedly a little overwhelmed with the amount of initial setup I've done. I'd love any advice as to how my files might be configured incorrectly or whether there might be an error with one of the versions of compass or sass as it relates to grunt (all are most recent non-beta versions).
Here is the text of my contrib.rb file:
require "susy"
css_dir = _/css
sass_dir = _/components/sass
javascripts_dir = _/js
output_style = :compressed
My gruntfile.js :
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.initConfig({
uglify: {
my_target: {
files: {
'_/js/script.js': ['_/components/js/*.js'] //tells grunt to track and compress any .js file found in components/js folder
} //files
} // my_target
}, // uglify
compass: {
dev: {
options: {
config: 'config.rb',
force: true // <-- ???
} //options
} //dev
}, //compass
watch: {
options: { livereload: true },
scripts: {
files: ['_/components/js/*.js'],
tasks: ['uglify']
}, //scripts
sass: {
files: ['_/components/sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.html']
}
} // watch
})// initConfig
grunt.registerTask('default', 'watch'); //makes 'grunt' command automaticaly execute the watch command to monitor JS files
} //exports
And my project folder structure:
sass_first_proj
|
_(folder)
|
components
|
css
|
js
images
node_modules
|
grunt
|
grunt-contrib-compass
|
grunt-contrib-uglify
|
grunt-contrib-watch
|
matchdep
.gitignore
|
config.rb
|
gruntfile.js
|
index.html
|
package.json

Answer 1

Not sure if you were able to solve this, but I was receiving the same error.
I had to include a forward slash before the directories to get Grunt to the right paths. I'm using similar steps in using Grunt and Compass for my project, and I'm on my PC so I just put the paths in single quotes. Based on how your project directory is structured, the two respective lines in the config.rb file would look like this:
css_dir = '/_/css'
sass_dir = '/_/components/sass'
Also in your question, I noticed you stated it was the "contrib.rb" file, but in your file directory that it is named config.rb. You reference it in your gruntfile.js file as config.rb, as well, but I just wanted to make sure that this file in the root of your project was being named "config.rb".
I know it was a lot of setup, so I hope this works for you.

Answer 2

So here's the thing, I've never used a contrib.rb file when using compass with Grunt. I know you can, and if you get it working, great. but the other option is to just specify the paths in the grunt config. Of course, this all assumes that you are able to actually compile the sass files. When googling for that error, it seems that much of the time it was an issue with the contrib.rb file that caused the issue.
So with that said, maybe you could leave off the contrib.rb file and just use Grunt?
compass: {
dev: {
options: {
sassDir: "_/components/sass",
specify: "_/components/sass/**/*.scss", // might not be necessary for you
cssDir: "_/css",
javascriptsPath: "_/js",
outputStyle: "compressed",
require: "susy"
}
}
}