Grunt not live-reloading Sass/SCSS (NodeJS)

Question

I am having a little trouble with Grunt, it's compiling my Sass/SCSS files (.scss I am using) but it won't LiveReload. I'm using the 'watch' dependency which integrates the LiveReload functionality.

Watch: https://github.com/gruntjs/grunt-contrib-watch Sass/SCSS: https://github.com/gruntjs/grunt-contrib-sass

Here's my config below (relevant piece), can anyone advise as to where I'm going wrong? It live reloads for everyother file and folder.

grunt.initConfig({
    connect: {
        options: {
            port: 9000,
            hostname: 'localhost'
        },
        livereload: {
            options: {
                middleware: function ( connect ) {
                    return [
                        mountFolder(connect, 'app'),
                        lrSnippet
                    ];
                }
            }
        }
    },
    open: {
        server: {
            path: 'http://localhost:<%= connect.options.port %>'
        }
    },
    sass: {
        app: {
            files: {
                './app/css/style.min.css': 'app/css/scss/style.scss'
            }
        }
    },
    watch: {
        options: {
            nospawn: true
        },
        css: {
            files: './app/css/scss/*.scss',
            tasks: ['sass'],
            options: {
                livereload: true,
            },
        },
        livereload: {
            options: {
                livereload: LIVERELOAD_PORT
            },
            files: [
                'app/{,*/}*.html',
                'app/css/{,*/}*.{css,scss,sass}',
                'app/js/{,*/}*.js',
                'app/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
            ]
        }
    }
});

Answer 1

Instead of using the connect middleware, try using something like this in your watch task (coffeescript Gruntfile syntax below):

watch:

  livereload:
    files: "path/to/generated/css"
    options:
      livereload: true