玩！带有 Less/CSS 的框架

Question

我正在使用 Play! 框架 (2.6.2)、Scala (2.12.2) 并尝试将 LESS 集成到其中。

我在他们的文档网站上使用this 教程。

在我的 build.sbt 文件中，这是代码：

lazy val root = (project in file(".")).enablePlugins(PlayJava, PlayEbean, SbtWeb)

includeFilter in (Assets, LessKeys.less) := "*.less" 
excludeFilter in (Assets, LessKeys.less) := "_*.less"

LessKeys.compress in Assets := true

在我的 plugin.sbt 文件中我添加了：

addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.1.2")

我有 2 个扩展名为 .less 的文件。 main.less 和 login.less 在 /public 目录下的 /css 文件夹中。

当我在目标文件夹中编译和运行项目时，文件保留为 .less 文件，不会编译为 .css 文件。

在我的 HTML 模板代码中，我有这一行：

<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("css/login.css")">

如果我将扩展名从 login.less 更改为 login.css，则样式表的链接有效，但在 login.less 文件中似乎无法访问变量。

样式表的链接无法按预期使用 .css 扩展名，因为框架似乎没有将文件编译为 .css，它似乎只是将它们保留为 .less 文件。因此，我只是在 .css 文件上得到 404。如果我将链接中的扩展名更改为 .less 它可以正常工作，但我从 main.less 导入到 login.less 的变量不起作用。

有没有我遗漏的步骤？有人可以解释为什么框架不会将 .less 文件编译为目标文件夹中的 .css 文件吗？

编辑 1：在尝试了 @marcospereira 建议的修复后：我认为应用程序正在尝试编译这两个文件，但也返回错误并且应用程序根本无法运行。

[info] LESS compiling on 2 source(s)
    -------
    Unexpected exception
    JsTaskFailure: java.lang.NoSuchMethodError: org.mozilla.javascript.ScriptRuntime.setObjectProp(Ljava/lang/Object;Ljava/lang/String;Ljava/lang/Object;Lorg/mozilla/javascript/Context;Lorg/mozilla/javascript/Scriptable;)Ljava/lang/Object;
        at io.apigee.trireme.node10.main.trireme._c_anonymous_1(trireme.js:37)
        at io.apigee.trireme.node10.main.trireme.call(trireme.js)
        at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:394)
        at org.mozilla.javascript.ScriptRuntime.doTopCall(ScriptRuntime.java:3102)
        at io.apigee.trireme.node10.main.trireme.call(trireme.js)
        at io.apigee.trireme.core.internal.ScriptRunner.runScript(ScriptRunner.java:762)
        at io.apigee.trireme.core.internal.ScriptRunner$4.run(ScriptRunner.java:702)
        at org.mozilla.javascript.Context.call(Context.java:488)
        at org.mozilla.javascript.ContextFactory.call(ContextFactory.java:504)
        at io.apigee.trireme.core.internal.ScriptRunner.call(ScriptRunner.java:697)
        at io.apigee.trireme.core.ScriptFuture.run(ScriptFuture.java:183)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
        at java.lang.Thread.run(Thread.java:748)
    -------

Answer 1

你需要在你的机器上安装 node.js。

如果您没有安装 node.js，那么它将回退到基于 Trireme Java 的 JavaScript 引擎，该引擎不能很好地工作并导致该错误

Answer 2

托管资产需要在 app/assets 内。来自the docs：

Play 中的可编译资产必须在app/assets 目录中定义。它们由构建过程处理，LESS 源代码被编译成标准 CSS 文件。生成的 CSS 文件作为标准资源分发到与非托管资产相同的 public/ 文件夹中，这意味着编译后使用它们的方式没有区别。

因此，您需要将文件从 public/css 移动到 app/assets/css。