Sass includes and Webjars

Question

I'm migrating a Play project to 2.3 and made my SCSS files compile using ShaggyYeti's sbt-sass plugin (a change from the play-sass plugin). I bundle everything into a minified css that gets placed in /assets/stylesheets/main.min.css. All worked alright until I started to pull frontend libraries using webjars.

The webjars themselves work correctly, and I am able to bundle scss from them into my main css, but there are problems bundling scss from webjars that reference other resources. For example font-awesome will get downloaded to lib/font-awesome with the fonts in locations like /assets/lib/font-awesome/fonts/fontawesome-webfont.eot. The problem is that the font-awesome scss references it with ../fonts/fontawesome-webfont.eot which after compilation will be /assets/fonts/fontawesome-webfont.eot.

Am I missing something here, or these are quirks that have not been solved yet, due to the short time this new system has been in place? If the latter, which do you think is the proper solution here?

1. Should I use a plugin to move/copy the referenced files in the expected folder? OR
2. Should the SCSS compiler/plugin rewrite the paths to the webjar download folder? OR
3. Should I include the font-awesome minified css as a separate link?

I tend to believe (2) would be the proper solution, since the scss in the webjar is obviously referencing a resource relative to the scss. That should be rewritten relative to the destination css.

Answer 1

This should have a better support, I work around declaring the reference direct in the template:

<link rel="stylesheet" href="@routes.WebJarAssets.at(WebJarAssets.locate("font-awesome.min.css"))" />

Before a attempt import the font-awesome in my main less:

@import "lib/font-awesome/less/font-awesome.less";

But imports behave as you said and do not work. The problem is if you want customize the less (and that is the reason to use less) than you can't do that strait forward. Another work around is put the fonts folder in the public folder and commit together.

This problem happens in sass and other resources as well.