How can I get Grunt/Watch/LiveReload to reload Sass/CSS without a full page refresh?
The first part of your question is straightforward enough. Live reload only reloads the files you specify in the configuration; i.e if you specify sass files it is those that are reloaded. I fixed this in my setup by having Grunt watch the css file in my dist directory, which obviously gets changed every time the Sass is recompiled.
watch: { options: { livereload: true, }, html: { files: ['index.html'], }, js: { files: ['js/**/*.js'], tasks: ['jshint'], }, sass: { options: { livereload: false }, files: ['css/scss/**/*.scss'], tasks: ['sass'], }, css: { files: ['dist/css/master.css'], tasks: [] }}
I'm not sure about the second question. It doesn't show those directories in my grunt watch --verbose
for any project, then again I never run that command verbosely.