How can I get Grunt/Watch/LiveReload to reload Sass/CSS without a full page refresh?

Question

So far, I\'ve gotten everything working how I want (which is monitoring all the files I want and refreshing whenever there is a change), other than I\'d love to be able to make

Answer 1

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.