CODEWITHSUNDEEP
sassgruntjscompass-sasscompass
Dan
Dan

Reputation: 5986

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.

Upvotes: 0

Views: 293

Answers (1)

manishie
manishie

Reputation: 5322

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

Upvotes: 0

Related Questions