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

The problem that I'm having, is that on pile of .scss files I get 'ERROR: Cannot load pass' 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' : [ 'ponents/js/*.js' ] 
        }
      }
    }, // uglify

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

  watch: {
    scripts : {
      files: ['ponents/js/*.js'],
      tasks: ['uglify']
    },
    css: {
      files: [ 'ponents/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!

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

The problem that I'm having, is that on pile of .scss files I get 'ERROR: Cannot load pass' 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' : [ 'ponents/js/*.js' ] 
        }
      }
    }, // uglify

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

  watch: {
    scripts : {
      files: ['ponents/js/*.js'],
      tasks: ['uglify']
    },
    css: {
      files: [ 'ponents/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!

• javascript
• gruntjs

6 Answers 6

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 pass --pre

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

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

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

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

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

BUT:

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

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

Example

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

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

When you install pass using gem install pass --pre

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

So to get it to work

gem uninstall sass
gem install pass --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-pass