好的，我想通了。对于所有想知道如何实时编辑播放项目的较少文件并将更改保存到源文件的人来说，这是我实现它的方法。此解决方案适用于在样式上使用较少的 playframework 开发人员 - 尽管我认为您应该能够使用每个 css 预处理器以类似的方式解决问题。请注意，我使用 Chrome 开发工具实时编辑我的代码：
首先你必须将这行代码添加到你的 build.sbt 中：
//enable source Map for lesscompilation
LessKeys.sourceMap in (Assets, LessKeys.less) := true
您需要 source Map 以便 Chrome 开发工具可以将 css 映射到相应的 lessfiles。重新编译后，在 chrome 中重新加载项目并按 f12 以调出 Chrome 开发工具。您的 Less 文件应该正确映射：
https://s3.amazonaws.com/robdodson/images/less-preview.png
请注意，侧面板指向“modules.less”--> 单击此指针会弹出 Sources 面板并打开相应的文件。如果您进入，编辑文件并按 ctrl s 进行保存，但没有任何反应。那是因为 Chrome 开发工具不知道将更改保存到磁盘的位置。
要告诉 Chrome 开发工具在哪里保存更改，您需要设置一个工作区。为此，请打开 Chrome 开发工具中的“源”面板。在左侧，您有一个文件树。右键单击该面板，然后单击“将文件夹添加到工作区”。工作区将您的本地文件映射到 URL，反之亦然。这是 Chrome 开发工具工作区深入解释的链接：
https://developer.chrome.com/devtools/docs/workspaces
我必须选择的文件夹位于此处：
pathToYourProject/target/web/public/main
现在这令人困惑，因为正如@Bass Jobsen 在他的帖子中提到的那样：
https://www.playframework.com/documentation/2.0/AssetsLess告诉你：
请注意，托管资源不会直接复制到您的应用程序公用文件夹中，而是保存在 target/scala-2.9.1/resources_managed 的单独文件夹中。
但就我而言，“target/sacal-2.9.1”中没有“resources_managed”这样的文件夹。经过几个小时的困惑，我发现该页面使用的文件对应于位于“pathToYourProject/target/web/public/main”中的文件。可能只有我一个人，欢迎评论。
配置工作区后，实时编辑仍然无法工作。这是由于需要编译的事实较少。那么如果你不重新编译 less 文件，css 怎么能知道发生了什么变化呢？要启用实时编辑，您需要查看您的 less 文件并在发生更改时将它们编译为 css。我使用 grunt 完成该任务：
http://gruntjs.com/getting-started
我不会详细介绍 grunt，它有据可查。我将发布我使用的 gruntfile。如您所见，grunt 监听文件夹“target/web/public/main/stylesheets”中较少文件的所有更改。如果发生更改，则启动任务“less”，重新编译文件“final.less”（这是导入所有其他 less-files 的文件）。重新编译后，grunt 将所有 .less 文件复制到项目的“app/assets/stylesheets”目录下。这对于将 Chrome 开发工具中的 less 文件所做的更改带到项目的实际 less 文件是必要的。我用了
这是文件：
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');
}
这就是我如何在 Chrome 开发工具中设置 less with play 的实时编辑。请注意，您无法在开发工具的 Elements 面板中编辑 less 文件。在那里所做的更改将删除 less 和 css 文件的映射。但是，如果您按住 ctrl 单击属性或类，您将被带到源面板中的相应文件和类/属性。保存的更改将触发重新编译 less 文件和繁荣 --> 您正在实时编辑您的页面 :) 我希望我可以帮助某人完成这篇文章。
链接和来源：
