Get Compass to compile css into specific directory when using Grunt

I want to get a basic pre-processing workflow in place. I've set up a directory structure like this:

- website-root
- - index.html
- - css
- - pre-processing
- - - Gruntfile.js
- - - package.json
- - - sass
- - - - test.scss

I'm using Grunt, as I'd like some advanced build actions in future. I'm also using Compass as I'd like to use its mixins etc.

What I want to do for now is simply set up a watch task to compile 'test.scss' into a 'test.css' file inside the css folder in the website root. However, no matter what I try, when I type 'compass watch' into the console and then change the contents of the 'test.scss' file, the result is that the 'test.css' file is always compiled into a new folder called 'stylesheets' in the 'pre-processing' folder.

The Gruntfile.js contents are:

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


        compass: {
            dev: {
                options: {
                    sassDir: 'scss/',
                    cssDir: '/css/',
                    relativeAssets: true
                }
            }
        },
        watch: {
            sass: {
                files: ['scss/{,*/}*.{scss,sass}'],
                tasks: ['compass:dev']
            }
        }

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

The package.json file contains this:

{
  "name": "Test",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-compass": "^1.0.1"
  }
}

So the cssDir option in Gruntfile.js seems to have no impact.

Can anyone suggest why this is happening? I'm a total pre-processing newby so could be missing something obvious!

Thanks.

Solution

When you type 'compass watch', you're running compass directly. You're trying to get this working using grunt. You need to type 'grunt watch'.