Getting started with Grunt and sass (partials)

Question

I am just getting started with Grunt and am a bit confused about how to configure my gruntfile.js to recognize changes to sass partial files. I've followed the article on 24ways.org by Chris Coyier and feel pretty comfortable with the basics. When running grunt watch, I can make changes to my style.scss file and grunt will watch and compile changes. However, I typically use style.scss as a long list of @imports:

@import 'partials/partialfilename';

When I make a change to any of my partials grunt does not notice anything has changed and thus nothing is compiled.

Within my project directory I have a sass directory that includes a style.scss file and a partials directory with lots of partials.

here is my grunt file:

module.exports = function(grunt) {

// 1. All configuration goes here 
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    concat: {   
        dist: {
            src: [
                'js/custom.js', 
                'js/foundation.js',
                'js/jquery.listnav.js',
                'js/jquery.ioslider.min.js'
            ],
            dest: 'js/build-scripts.js',
        }
    },

    uglify: {
        build: {
            src: 'js/build-scripts.js',
            dest: 'js/build-scripts-min.js'
        }
    },

    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: 'images/',
                src: ['**/*.{png,jpg,gif}'],
                dest: 'images/'
            }]
        }
    },

    sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.css': 'sass/style.scss'
            }
        } 
    }, 

    watch: {
        options: {
            livereload: true,
        },
        scripts: {
            files: ['js/*.js'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            }
        },
        css: {
            files: ['sass/**/*.scss'],
            tasks: ['sass'],
            options: {
                spawn: false,
            }
        },

        images: {
            files: ['images/**/*.{png,jpg,gif}', 'images/*.{png,jpg,gif}'],
            tasks: ['imagemin'],
            options: {
              spawn: false,
            }
        }

    }



});

// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');

// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['watch', 'concat', 'uglify', 'imagemin', 'sass']);

};

I have tried a few different options for the watch css arguments such as:

css: {
  files: ['sass/**/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false
  }
}

and

css: {
  files: ['sass/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false
  }
}

I realize that I may be 'missing the point' here, I have read a bit about the grunt sass plugin 'ignoring' (_) underscores or partials because of the sass globbing rule (?) and through my research I have noticed that most people are using compass in their projects which I am not.

So, again my question is: How can I configure grunt to watch and compile changes to my sass partials and compile my css correctly?

score 1 · Accepted Answer · edited Aug 05 '14 at 10:36

1

I have found a solution.

css: {
  files: ['sass/*.scss'],
  files: ['sass/partials/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false,
  }
}

edited Aug 05 '14 at 10:36

Preview

35,317
10
92
112

answered Jul 29 '14 at 18:12

derekshirk

187
1
7

This really helped me, so thank you! I have multiple subdirectories for mixins and partials, so i used `[scss/**/*.scss'] and this enables me to save imports and compile the scss file that imports said files! few! – Matt May 16 '17 at 15:24

Getting started with Grunt and sass (partials)

1 Answers1