玩! Less/CSS 框架

Play! Framework with Less/CSS

我是用Play! Framework ( 2.6.2 ), Scala ( 2.12.2 ) and trying to integrate 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,则样式表的 link 会起作用,但变量似乎无法在 login.less 文件中访问.

样式表的 link 不能像预期的那样与 .css 扩展一起使用,因为框架似乎没有将文件编译为 .css,它似乎只是将它们保留为 .less 文件。因此,我只是在 .css 文件上收到 404。如果我将 link 中的扩展名更改为 .less 则它可以正常工作,但我从 main.less 导入到 login.less 的变量不起作用。

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

编辑 1: 在尝试了@marcospereira 建议的修复之后:我认为该应用程序正在尝试编译这两个文件,但也 returns 我出错了,应用程序没有根本 运行。

[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.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)
    -------

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

Compilable assets in Play must be defined in the app/assets directory. They are handled by the build process, and LESS sources are compiled into standard CSS files. The generated CSS files are distributed as standard resources into the same public/ folder as the unmanaged assets, meaning that there is no difference in the way you use them once compiled.

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

您需要在计算机上安装 node.js。

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