file to import not found or unreadable: "compass" - sass

Question

I am receiving the error "file to import not found or unreadable: "compass"" when I am attempting to run my "grunt" task.
"Running "sass:app" (sass) task"
Warning: build/global/css/base:1: file to import not found or unreadable: "compass"
Here is my gruntfile:
module.exports = function(grunt) {
// COMMANDS
// comple css and js - $ grunt
// optim - run $ grunt imgoptim
// FILE STRUCTURE
// css/app.css, css/app.min.css
// build/global/css/*.scss
// build/global/css/**/*.scss
// build/components/componentname/css/*.scss
// css/singlefile.css, css/singlefile.min.css
// build/global/solo/css/*.scss
// js/app.js, js/app.min.css
// build/global/js/*.js
// build/global/js/**/*.js
// build/components/componentname/js/*.js
// singlefile.js, singlefile.min.js
// build/global/solo/js/*.js
var watch = {};
var uglify = {};
var concat = {};
var sass = {};
var cssmin = {};
var js_files = [
'build/global/js/vendor/respond.js',
'build/global/js/vendor/AccessifyHTML5.js',
'build/global/js/vendor/jquery.equalHeights.js',
'build/global/js/vendor/jquery.infinitescroll.js',
'build/global/js/vendor/jquery.verticalcentering.js',
'build/global/js/global.js',
'build/components/**/js/vendor/*.js',
'build/components/**/js/*.js'
];
// WATCH =========================================/
watch.solocss = {
options: { livereload: true }, // currently not working correctly, should be able to remove this line
livereload: {
options: { livereload: true },
files: ['css/*.css', '!css/*.min.css']
},
files: 'build/solo/css/*.scss',
tasks: [
'newer:sass:solo'
]
};
watch.appcss = {
options: { livereload: true }, // currently not working correctly, should be able to remove this line
livereload: {
options: { livereload: true },
files: ['css/*.css', '!css/*.min.css']
},
files: [
'build/global/css/**/*.scss',
'build/global/css/*.scss',
'build/components/**/*.scss'
],
tasks: [
'sass:app',
'concat:appcss',
'sass:solo' // run solo here too incase there are changes to sass vars etc
]
};
watch.cssmin = {
files: ['css/*.css', '!css/*.min.css'],
tasks: [
'newer:cssmin:compress',
]
};
watch.solojs = {
options: { livereload: true }, // currently not working correctly, should be able to remove this line
livereload: {
options: { livereload: true },
files: ['js/*.js', '!js/*.min.js']
},
files: 'build/solo/js/*.js',
tasks: [
'newer:uglify:solojsdev',
'newer:uglify:solojsprod'
]
};
watch.globaljs = {
options: { livereload: true }, // currently not working correctly, should be able to remove this line
livereload: {
options: { livereload: true },
files: ['js/*.js', '!js/*.min.js']
},
files: ['build/global/js/*.js', 'build/global/js/**/*.js', 'build/components/**/*.js'],
tasks: [
'concat:appjs',
'uglify:appjs'
]
};
// CSS COMPLILATION ====================================/
//solo files, compiled to /css/file.css
sass.solo = {
options:{
includePaths: require('node-bourbon').with('build'),
sourceComments: true,
style: 'expanded', // compile in expanded format with comments for dev,
compass: true
},
files: [{
expand: true,
src: watch.solocss.files, // where it's coming from
dest: 'css', // where it's going
flatten: true, // removes folder tree
ext: '.css', // what file extension to give it - standard
extDot: 'last'
}]
};
// app scss files, compiled individually to /css/build/...
sass.app = {
options:{
includePaths: require('node-bourbon').with('build'),
style: 'expanded', // compile in expanded format with comments for dev
sourceComments: 'normal',
},
files: [{
//cwd: 'build',
expand: true,
src: watch.appcss.files, // where it's coming from
dest: 'css', // where it's going
ext: '.css' // what file extension to give it - standard
}]
};
// concat app.css files
concat.appcss = {
src: [
'css/build/global/css/**/*.css',
'css/build/global/css/*.css',
'css/build/components/**/*.css'
],
dest: 'css/app.css',
seperator: '\n'
};
// create compressed version of all css files for prod
cssmin.compress = {
files: [{
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css', '!editor.css'],
dest: 'css/',
ext: '.min.css',
extDot: 'last'
}]
}
// JAVASCRIPT COMPLILATION ============================/
// concat app.js files
concat.appjs = {
src: js_files,
dest: 'js/app.js',
separator: ';'
};
// minify app.js
uglify.appjs = {
files: {
'js/app.min.js': [
'js/app.js'
]
}
};
// uglify solo files for dev
uglify.solojsdev = {
options: {
compress: false,
mangle: false,
beautify: true
},
files: [{
expand: true,
flatten: true, // removes folder tree
src: watch.solojs.files,
dest: 'js/'
}]
};
// uglify + minify solo files for prod
uglify.solojsprod = {
options: {
compress: true
},
files: [{
expand: true,
flatten: true, // removes folder tree
src: watch.solojs.files,
dest: 'js/',
ext: '.min.js',
extDot: 'last',
}]
};
// IMAGE OPTIMISATION ==========================/
imageoptim = {
optimise: {
src: ['images']
}
}
// GRUNT ======================================/
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: watch,
sass: sass,
concat: concat,
cssmin: cssmin,
uglify: uglify,
imageoptim: imageoptim
});
// DEPENDENT PLUGINS =========================/
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-imageoptim');
grunt.loadNpmTasks('grunt-newer');
// TASKS =====================================/
grunt.registerTask('default', [
'sass',
'concat',
'newer:cssmin',
'newer:uglify',
'watch'
]);
grunt.registerTask('imgoptim', [
'imageoptim'
]);
}
My directory structure looks like the following relative from the gruntfile.js:
/build/global/components/FOLDERS/*.scss files
/build/global/css/FOLDERS & *.scss files
/dist/*.css files
Here is my config.rb file in the same directory as the gruntfile:
http_path = "/"
css_dir = "css"
sass_dir = "build"
images_dir = "images"
javascripts_dir = "javascript"
I already have compass installed and all the node_modules.