Using Grunt.js to dynamically watch, and subsequently compile, a directory of SASS files into one CSS file

Question

I'm brand new to Grunt.js, but I'm starting to get the hang of it. The main thing I'd like to do with it however, I can't seem to nail down.

My goal here, is to point grunt at a directory, and have it watch all of the matching files, and upon changes, compile them into a new single CSS file.

Here's my current gruntfile:

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        // CONFIG =========================/
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'assets/css/style.css' : 'assets/css/sass/*.scss'
                }
            }
        },
        watch: {
            css: {
                files: 'assets/css/sass/*.scss',
                tasks: ['sass']
            }
        }
    });
    // DEPENDENT PLUGINS =========================/
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-sass');

    // TASKS =====================================/
    grunt.registerTask('default', ['watch']);
};

Thus far I've been using grunt-contrib-watch, and grunt-contrib-sass. I've tried compass, as well as directory import but I couldn't get either of them to do what I'm trying to do either.

At the end of the day, I'm really just trying to avoid writing an import file, both because source order isn't going to matter for the way I'm writing my SASS, and becuase I'd really like to know how to make this happen.

Answer 1

I'm not sure of a way to do exactly what you want to achieve by just using Sass and Grunt-Contrib-Sass but you can achieve something similar by using Sass-Globbing, a SASS plug-in that lets you import entire directories. To use the plug-in, you'd use the require option in Grunt-Contrib-Sass and you'd have it target a main styles.scss file that may look something like:

@import "vendor/*";
@import "modules/*";
@import "partials/*";

And then your grunt file would have something like:

sass: {
    dist: {
        options: {
            require: 'sass-globbing'
        },
        files: {
            'assets/css/style.css' : 'assets/css/sass/style.scss'
        }
    }
}