Gooday.
我试图实现的目标：使用play，同时能够在chrome开发工具中编辑javascript和lessfiles。
我想到了：如果您将项目的"公共"文件夹添加到 chrome 开发工具的 resources 选项卡中的工作区，一切都按预期工作。在Chrome开发工具中所做的更改将保存到相应的css和javascript文件中，并且页面会实时反映更改。如果您将"app/assets/stylesheets"目录添加到 chrome 开发工作区，也会发生同样的情况 ->控制台中对文件所做的更改也会保存到光盘上保存的文件中。
此外，如果从控制台运行"激活器 ~run"，则对任何需要编译的文件所做的更改都会触发重新编译。我到了那个地步，我可以在开发工具中更改我较少的代码。更改到本地文件的位置，并使播放重新编译。一切都很好，很花花公子，可悲的是 - 一切都结束了：/
问题：我用的更少，而且编译到某个混乱的地方更少(我还没有弄清楚确切的位置(。如果我不知道目录，我无法将 css 文件(从较少文件编译(添加到 chrome 开发控制台的工作区 - 这意味着 chrome 不知道何时重新绘制页面，并且我在控制台中收到"ressource 不可用"错误。首先，我认为实际设置页面样式的css存储在项目的"目标"文件夹中，但事实并非如此。(我将目标文件夹添加到工作区，但更改此文件夹中的 css 文件并未反映在页面上(
我的问题：从更少的文件编译后 css 在哪里？或者有没有其他方法可以在浏览器中启用更少(或任何编译的脚本/样式源(的实时编辑？
我想通了。对于所有想知道如何实时编辑播放项目的较少文件并将更改保存到源文件的人，这是我实现它的方式。此解决方案适用于使用较少样式的Playframework开发人员 - 尽管我认为您应该能够以类似的方式使用每个css预处理器解决问题。请注意，我使用 Chrome 开发工具实时编辑我的代码：
首先，您必须将以下代码行添加到build.sbt中：
//enable source Map for lesscompilation
LessKeys.sourceMap in (Assets, LessKeys.less) := true
您需要源映射，以便Chrome Dev Tool可以将css映射到相应的lessfiles。重新编译后，在 chrome 中重新加载项目并按 f12 以调出 Chrome 开发工具。您的"较少"文件应正确映射：
https://s3.amazonaws.com/robdodson/images/less-preview.png
请注意，侧面板指向"modules.less" -->单击此指针将弹出"源"面板并打开相应的文件。如果您进入，编辑文件并按 ctrl s 进行保存，则没有任何反应。这是因为Chrome Dev工具不知道将更改保存到磁盘的位置。
要告知 Chrome 开发者工具将更改保存到何处，您需要设置工作区。为此，请在Chrome开发工具中打开"源"面板。在左侧，您有一个文件树。右键单击该面板，然后单击"将文件夹添加到工作区"。工作区将您的本地文件移动到 URL，反之亦然。以下是有关 Chrome 开发工具工作区的深入说明的链接：
https://developer.chrome.com/devtools/docs/workspaces
我必须选择的文件夹位于此处：
pathToYourProject/target/web/public/main
现在这令人困惑，因为正如@Bass乔布森在他的帖子中提到的：
https://www.playframework.com/documentation/2.0/AssetsLess 告诉你：
请注意，托管资源不会直接复制到您的 应用程序公用文件夹，但维护在 目标/斯卡拉-2.9.1/resources_managed。
但就我而言，"目标/sacal-2.9.1"中没有"resources_managed"这样的文件夹。经过几个小时的混乱，我发现页面使用的文件对应于位于"pathToYourProject/target/web/public/main"中的文件。可能只有我，请随时对此发表评论。
配置工作区后，实时编辑仍然不起作用。这是因为需要编译的较少。那么，如果你不重新编译更少的文件，css 怎么知道某些东西发生了变化呢？要启用实时编辑，您需要监视较少的文件，并在发生更改时将它们编译为 css。我用咕噜声来完成这个任务：
http://gruntjs.com/getting-started
我不会详细介绍咕噜声，它有据可查。我只会发布我使用的 gruntfile。如您所见，grunt 侦听文件夹 "target/web/public/main/stylesheets" 中较少文件的所有更改。如果发生更改，则启动任务"less"，重新编译文件"final.less"(这是导入所有其他较少文件的文件(。重新编译后，grunt 将所有 .less 文件复制到项目的 "app/assets/stylesheets" 目录中。这是将Chrome开发工具中较少文件所做的更改与项目的实际较少文件相结合的方法。我用了
- 咕噜咕噜复制 --> https://github.com/gruntjs/grunt-contrib-copy 咕噜
- 咕噜-无--> https://github.com/gruntjs/grunt-contrib-less 咕噜咕噜咕噜
- >咕噜��https://www.npmjs.com/package/grunt-watch-github
这是文件：
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 和 css 文件的映射。但是，如果按住 ctrl 键单击属性或类，则会转到源面板中的相应文件和类/属性。保存的更改将触发较少文件和繁荣的重新编译 ->您正在实时编辑页面:)我希望我能帮助某人完成这篇文章。
链接和来源：
- http://code.tutsplus.com/tutorials/working-with-less-and-the-chrome-devtools--net-36636
- http://gruntjs.com/getting-started
- https://www.playframework.com/documentation/2.2.x/Build
- https://www.playframework.com/documentation/2.0/AssetsLess
https://www.playframework.com/documentation/2.0/AssetsLess 告诉你：
请注意，托管资源不会直接复制到您的 应用程序公用文件夹，但维护在 目标/斯卡拉-2.9.1/resources_managed。