CSS changes from compiled .less file will not livereload with grunt serve - css

Question

I have done some searching but have not been able to find a solution to my issue - I would like to have my page livereload after the main.css file is updated by converting bootstrap.less, all done through grunt tasks and grunt serve.
Code I have tried so far:
In Gruntfile.js
grunt.initConfig({
less: {
development: {
options: {
paths: ["bower_components/bootstrap/less"]
},
files: {
"app/styles/main.css": "bower_components/bootstrap/less/bootstrap.less"
}
},
watch: {
styles: {
files: ['app/styles/{,*/}*.css'],
options:{
livereload: true,
}
},
less: {
files:['bower_components/bootstrap/less/{,*/}*.less'],
tasks: ['less']
},
When running grunt serve and then editing any .less file the bootstrap.less successfully compiles into main.css. The issue I'm having is I have to kill my grunt serve instance and start up another one for any of the css changes to take effect (however, changes to the HTML appear as expected with no need to refresh the page/kill server)
Some notes:
Even after compiling the bootstrap.less file and opening the main.css file and "editing" it manually the livereload does not work even though my console shows "app\styles\main.css" changed and then shows "Live reloading app\styles\main.css..." (it says it completed in 0.000s which does not seem correct)
I do have the "livereload" extension installed for both Chrome and Firefox and neither appear to help the situation
My bootstrap.less file is composed of all #imports (when researching it seemed like this may cause an issue)
I'm working with:
"grunt": "~0.4.1",
"grunt-contrib-watch": "~0.6.1",
"load-grunt-tasks": "~0.4.0",
"grunt-contrib-less": "^0.11.0"
For reference here are my grunt server settings:
connect: {
options: {
port: 9000,
open: true,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
middleware: function(connect) {
return [
connect.static('.tmp'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
test: {
options: {
open: false,
port: 9001,
middleware: function(connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
dist: {
options: {
base: '<%= config.dist %>',
livereload: false
}
}
},
Also, this is my first post/question - feel free to let me know if I should be doing anything differently.
Thanks!