Play! Framework with Less/CSS

I am using the Play! Framework ( 2.6.2 ), Scala ( 2.12.2 ) and trying to integrate LESS into it.

I was using this tutorial on their documentation website.

In my build.sbt file this is the code in place:

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

And in my plugin.sbt file I’ve added:

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

I’ve got 2 files with .less extention. main.less and login.less in a /css folder under /public directory.

When I compile and run the project in my target folder the files stay as .less files and don’t get compiled into .css files.

In my HTML template code I have this line:

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

The link to the stylesheet works if I change the extention from login.less to login.css but the variables don’t seem to be accessible in the login.less file.

The link to the stylesheet doesn’t work with the .css extention as expected because the framework doesn’t seem to be compiling the files to .css, it just seems to leave them as .less files. Therefore I’m just getting a 404 on the .css file. If i change the extention in the link to .less it then works fine but variables I’ve imported from main.less to login.less don’t work.

Is there a step I’m missing? Can somebody explain why the framework would not compile the .less files to .css files in my target folder?

EDIT 1: After trying the fix suggested by @marcospereira: I think the application is trying to compile both files but also returns me an error and application doesn’t run at all.

[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 org.mozilla.javascript.ContextFactory.doTopCall(
        at org.mozilla.javascript.ScriptRuntime.doTopCall(
        at io.apigee.trireme.core.internal.ScriptRunner.runScript(
        at io.apigee.trireme.core.internal.ScriptRunner$
        at java.util.concurrent.ThreadPoolExecutor.runWorker(
        at java.util.concurrent.ThreadPoolExecutor$

Managed assets needs to be inside app/assets. From 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.

So, you need to move your files from public/css to app/assets/css.

You need to install node.js on your machine.

If you do not have node.js installed then it will fall back to the Trireme Java-based JavaScript engine, which does not work very well and is resulting in that error