Grunt-contrib-sass not working with compass

Question

I'm new to Grunt, and am trying to configure grunt-contrib-sass to work alongside Compass.

I'm using the grunt-contrib-sass plugin, as I need to export my .scss files to two separate destinations and I couldn't get that to work with grunt-contrib-compass.

The problem that I'm having, is that on compile of .scss files I get 'ERROR: Cannot load compass' in the terminal.

Here's a copy of my gruntfile.js;

module.exports = function(grunt){

  grunt.initConfig({

    uglify: {
      my_target: {
        files: {
          'wp-content/themes/mytheme/js/functions.js' : [ 'components/js/*.js' ] 
        }
      }
    }, // uglify

    sass:{
      dist:{
        files: {
          'wp-content/themes/mytheme/style.css' : 'components/sass/style.scss',
          'wp-content/themes/mytheme/css/ie.css' : 'components/sass/ie.scss '
        },
      options: {
        compass: true,
      }
    }
  },

  watch: {
    scripts : {
      files: ['components/js/*.js'],
      tasks: ['uglify']
    },
    css: {
      files: [ 'components/sass/*.scss'],
      tasks: [ 'sass' ],
      options: { livereload: true }
    },
    livereload: {
      options: { livereload: true },
      files: ['wp-content/themes/mytheme/'],
    },
  } // watch

})

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask( 'default', 'watch' );

} // exports

Thanks!

Answer 1

Grunt-contrib-sass doesn't support Compass versions less than v1.0.0 (which is in alpha at the time of writing).

After updating Compass with;

gem install compass --pre

everything appears to work fine on compilation. The same gruntfile.js was used as above.

Answer 2

Removing all versions of sass except of known working version 3.2.19 solved the problem for me.

$ sudo gem uninstall sass
Select gem to uninstall:
 1. sass-3.2.3
 2. sass-3.2.5
 3. sass-3.2.19
 4. sass-3.3.5
 5. All versions
> 4

Answer 3

According to the grunt-contrib-compass github page you need to have Ruby, Sass and Compass installed as prerequisite. You are using grunt-contrib-sass instead of grunt-contrib-compass. See examples on the contrib-compass github.

Answer 4

I found another way to get compass to work without the ruby gem. (it is a bit of work though).

Go to https://github.com/Compass/compass and get the code. Copy the contents of core/stylesheets/compass into your sass/scss folder. Now you can use the normal import-rules from the compass-website.

BUT:

You probably have to change some imports from compass like import "compass/support"; in _transitions.scss to import "../support";

Answer 5

grunt-contrib-sass perfectly works with compass, just add compass: true to options. I read this point on oficial git repository.

Example

sass: {
        dist: {
            options: {
                style: 'expanded',
                compass: true
            },
            files: [
                {
                    expand: true,
                    cwd: 'ipa-framework/src/css/scss',
                    src: ['*.scss'],
                    dest: 'ipa-framework/src/css',
                    ext: '.css'
                }
            ]
        }
    }

Answer 6

So none of the answers worked exactly for me but it did help me solve the issue.

When you install compass using gem install compass --pre

it installs another version of sass, so dont install sass at all let the compass install do it for you.

So to get it to work

gem uninstall sass
gem install compass --pre

And for reference this is the npm libraries I needed to have to get this working

npm install -g grunt grunt-contrib-sass grunt-contrib-watch grunt-livereload sass grunt-contrib-cssmin grunt-contrib-compass