title: How can I get Grunt/Watch/LiveReload to reload Sass/CSS without a full page refresh?
body: <p>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 modifications to Sass/CSS and have it refresh in the browser without a page load. It's not a huge deal, but sometimes I'm trying to modify the style of something after there's been some page interaction and I have to go through the process all over again if the page refreshes.</p>
  
  <p>I'm fairly certain this is possible, but it eludes me so far.</p>
  
  <p>Here's my <code>Gruntfile.js</code>:</p>
  
  <pre><code>module.exports = function(grunt) {
  
    // Project configuration.
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      connect: {
        server: {
          options: {},
        }
      },
      sass: {
        dist: {
          options: {
            style: 'compressed'
          },
          files: {
            'css/main.css': 'css/scss/main.scss',
          }
        }
      },
      jshint: {
        files: ['js/*.js'],
      },
      watch: {
        options: {
          livereload: true,
        },
        html: {
          files: ['index.html'],
        },
        js: {
          files: ['js/**/*.js'],
          tasks: ['jshint'],
        },
        css: {
          files: ['css/scss/**/*.scss'],
          tasks: ['sass'],
        },
      }
    });
  
    // Actually running things.
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-jshint');
  
    // Default task(s).
    grunt.registerTask('default', ['connect', 'watch']);
  
  };
  </code></pre>
  
  <p>One odd thing I wanted to mention about my setup: when I run <code>grunt watch --verbose</code> I see that it's monitoring <code>.git</code> as well as <code>.sass-cache</code>. Does that seem right? I don't know what I did to make it do that.</p>
  
  <pre><code>Watching .git for changes.
  Watching .sass-cache for changes.
  </code></pre>