I have an Angular JS project with LESS and am using grunt to compile and display my page, via grunt serve. However, after every save/compile of a LESS file, the page reloads with the changes. If I had change the state of objects on my page, and made a LESS edit, the page reload re-sets the page state and I need to make all my changes again to see if my CSS fix was sufficient.
Is there a way to configure this where the LESS file compiles, the CSS is reloaded without loading the entire HTML page?
here is the connect section of my Grunt.js:
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
//hostname: 'localhost',
hostname: '0.0.0.0',
livereload: 35729
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
]
}
},
test: {
options: {
port: 9001,
base: [
'.tmp',
'test',
'<%= yeoman.app %>'
]
}
},
dist: {
options: {
base: '<%= yeoman.dist %>'
}
}
},
and the LESS part:
//LESS
less: {
theme: {
options: {
sourceMap: true,
sourceMapFilename: '.tmp/dist/css/theme.css.map',
sourceMapURL: 'theme.css.map',
outputSourceFiles: true
},
files: [{
".tmp/dist/css/theme.css": "<%= yeoman.less %>/theme.less"
}]
},
preview: {
options: {
sourceMap: true,
sourceMapFilename: '.tmp/live_preview/styles/main.css.map',
sourceMapURL: 'main.css.map',
outputSourceFiles: true
},
files: [{
".tmp/live_preview/styles/main.css": "<%= yeoman.preview %>/less/main.less"
}]
},
distTheme: {
options: {
compress: true,
yuicompress: true,
optimization: 2,
sourceMap: true,
sourceMapFilename: '<%= yeoman.dist %>/dist/css/theme.css.map',
sourceMapURL: 'theme.css.map',
outputSourceFiles: true
},
files: [{
"<%= yeoman.dist %>/dist/css/theme.css": "<%= yeoman.less %>/theme.less"
}]
}
},