Ok I figured it out. For all of you wondering how you can edit the less files of your play project live and save the changes to the source files, heres how I achived it. This Solution is for playframework developers who use less for their styling - Though i think you should be able to solve the issue in a similar manner with every css pre-processor. Note that I use the Chrome Dev Tool to live edit my code:
first of all you have to add this line of code to your build.sbt:
//enable source Map for lesscompilation
LessKeys.sourceMap in (Assets, LessKeys.less) := true
You need the source Map so that the Chrome Dev Tool can map the css to the corresponding lessfiles. After recompilation, reload the project in chrome and hit f12 to bring up the Chrome Dev Tool. Your Less files should be mapped correctly:
https://s3.amazonaws.com/robdodson/images/less-preview.png
Note that the sidepannel points to "modules.less" --> a click on this pointer prings up the Sources panel and opens the corresponding file. If you go in, edit the file and hit ctrl s for saving, nothing happens though.Thats because the Chrome Dev Tool doesn't know where to save the changes to the disk.
To tell the Chrome Dev Tool where to save the changes, you need to set up a Workspace. To do that, open the "Sources" pannel in the Chrome Dev Tool. On the left side, you have a file-tree. Right click in that pannel and click on "add folder to Workspace". A Workspace mapps your local files to an Url and visa-versa. heres a link to an in-depth explanation of the Chrome Dev Tool Workspace:
https://developer.chrome.com/devtools/docs/workspaces
The folder I had to pick was located here :
pathToYourProject/target/web/public/main
now this is confusing, because as @Bass Jobsen mentioned in his post:
https://www.playframework.com/documentation/2.0/AssetsLess tells you:
Note that managed resources are not copied directly into your
application public folder, but maintained in a separate folder in
target/scala-2.9.1/resources_managed.
But in my case, there was no such folder as "resources_managed" in "target/sacal-2.9.1". After some hours of confusion, i found that the files used by the page corresponded to the files located in "pathToYourProject/target/web/public/main". Probably it's just me, feel free to comment on that.
After configuring the Workspace, live editing still won't work. This is due to the fact that less needs compilation. So how can the css know that something has changed if you don't recompile the less files? To enable live editing, you need to watch your less files and compile them to css if changes occure. I used grunt for that task:
http://gruntjs.com/getting-started
I won't go in to any details on grunt, it's well documented. I'll just post the gruntfile i use.As you can see, grunt listens for all changes on the less files in the folder "target/web/public/main/stylesheets". If changes occure, the task 'less' is initiated which recompiles the file "final.less" (this is the file that imports all other less-files). After recompilation, grunt copys all .less files to the "app/assets/stylesheets" directory of the project. This is nessecery to bring the changes made to the less files in the Chrome Dev Tool to the actual less files of the project.
I used
Here's the file:
module.exports = function(grunt){
grunt.initConfig({
less: {
development:{
options:{
sourceMap: true,
},
files:{
'target/web/public/main/stylesheets/final.css':'target/web/public/main/stylesheets/final.less',
}
}
},
watch: {
styles:{
options:{
livereload: true,
spawn: false,
event: ['added','deleted','changed']
},
files:['target/web/public/main/stylesheets/**/*.less'],
tasks:['less','copy']
}
},
copy: {
main: {
files: [
{expand: true, cwd: 'target/web/public/main/stylesheets/', src:['**/*.less'], dest:'app/assets/stylesheets/'}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
}
Thats how i set up live editing of less with play in the Chrome Dev Tool. Note that you can't edit the less file in the Elements pannel of the Dev Tool. Changes made there will remove the mapping of the less and css files. If you ctrl-click on the properties or classes however, you will be taken to the corresponding file and class/property in the sources pannel. There saved changes will trigger the recompilation of the less file and boom --> you're live editing your page :)
I hope i could help someone with this post.
Links and sources:
