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.