Getting started with Grunt and sass (partials) - sass

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?

Answer 1

I have found a solution.
css: {
files: ['sass/*.scss'],
files: ['sass/partials/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}