CODEWITHSUNDEEP
sassgruntjscompass-sass
Phil Sinatra
Phil Sinatra

Reputation: 429

How do I setup gruntjs compass watch with multiple subdirectories of scss files

Is there a gruntjs configuration for using compass-watch with multiple subdirectories of scss files? My folder structure looks like:

scss/
  ie.scss
  modules/
    _mixins.scss
    _settings.scss
  partials/
    _forms.scss
    _grid.scss
    _typeography.scss
    _utilities.scss
  print.scss
  screen.scss
  vendor/
    _font-awesome.min.scss
    _pure-buttons.scss
    _pure-forms.scss

If I set up a watch task on the scss directory it will watch the three files at that level. I want a setup similar to if this project were running in CodeKit where any changes to a file that is being imported by screens.scss will trigger a refresh of all the CSS code.

So if I change something in partials/_typeography.scss I need grunt to refresh screens.scss which contains an @import statement for that partial.

Upvotes: 1

Views: 3210

Answers (1)

Ikhtiyor
Ikhtiyor

Reputation: 817

Check this out.

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        compass: {
            clean: {
                options: {
                    clean: true
                }
            },
            dev: {
                options: {
                    sassDir: ['sass'],
                    cssDir: ['css'],
                    environment: 'development',
                    force: true
                }
            },
            prod: {
                options: {
                    sassDir: ['sass'],
                    cssDir: ['css'],
                    environment: 'production',
                    force: true
                }
            }
        },
        watch: {
            sass: {
                files: ['sass/**/*.scss'],
                tasks: ['compass:dev']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-compass');

    grunt.registerTask('build', ['compass:prod']);
    grunt.registerTask('default', ['watch']);
};

Upvotes: 6

Related Questions