Sass includes Webjars
I am migrating a Play project to 2.3 and making my SCSS files using the ShaggyYeti sbt-sass plugin (change from play-sass plugin ). I collect everything into minified CSS that fits into /assets/stylesheets/main.min.css
. Everything worked well until I started pulling out frontend libraries using webjars.
The webjars themselves are working correctly and I can bind the scss to them in my main css, but there are scss binding issues from the webjars that link to other resources. For example, font-awesome will be loaded lib/font-awesome
using fonts in places like /assets/lib/font-awesome/fonts/fontawesome-webfont.eot
. The problem is the font-awesome scss is referencing it from ../fonts/fontawesome-webfont.eot
, which will be after compilation /assets/fonts/fontawesome-webfont.eot
.
Am I missing something, or is it not yet resolved due to the short time this new system was in place? If the latter, which you think is the correct solution here?
- Should I use a plugin to move / copy the referenced files to the expected folder? OR
- Should the SCSS compiler / plugin rewrite the paths to the webjar download folder? OR
- Should I include the font-awesome minified css as a separate link?
I tend to believe (2) would be the correct solution, since the scss in the webjar obviously refers to a resource relative to scss. This should be rewritten relative to the target css.
source to share
This should have better support, I am working on declaring the link directly in the template:
<link rel="stylesheet" href="@routes.WebJarAssets.at(WebJarAssets.locate("font-awesome.min.css"))" />
Before trying, import font-awesome in my basically smaller:
@import "lib/font-awesome/less/font-awesome.less";
But the import behaves as you said and doesn't work. The problem is that you want to tune less (and that's the reason to use less) than you can't make that strait forward. Another work around is to put the fonts folder in a shared folder and commit together.
This problem occurs in sass and other resources as well.
source to share
You just need to add the following line to _variable.scss
$fa-font-path: "/assets/lib/font-awesome/fonts";
Look here: http://fortawesome.github.io/Font-Awesome/get-started/#custom-less
source to share
Thanks to @ GSP59 I was able to solve this problem by adding the following line to my file main.scss
right before importing the font:
$fa-font-path: "../lib/font-awesome/fonts";
@import "lib/font-awesome/scss/font-awesome.scss";
NOTE that it is not necessary to add it to the _variables.scss
mandatory if you do not have such a file.
source to share