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

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.