VBlog

Using Compass as a Grunt task allows you to benefit from Compass built-in mixins and helpers, as well as keep basing your application configuration on Compass config.rb file.

1. Install Compass and Watch plugins

This is done by running these commands:

npm install grunt-contrib-compass --save-dev
npm install grunt-contrib-watch --save-dev

Don’t ommit the --save-dev part since it will actually edit your package.json file to insert the dependencies.

2. Modify Gruntfile.js.

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // ...
        compass: {
            dist: {
                options: {}
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['compass']
            }
        }
    });

    // ...
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['compass', '...']);
};

Leaving options empty tells Compass to use the settings contained in the config.rb file next to the Gruntfile.js. If you need to override some or all of the options, or to use a config.rb file located elsewhere, here’s the list of supported options.