StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I get Grunt/Watch/LiveReload to reload Sass/CSS without a full page refresh?
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload