Sass включает в себя и Webjars

Question

Я переношу Play-проект на 2.3 и делал свои файлы SCSS с помощью ShaggyYeti's sbt-sass plugin (изменение от play-sass plugin). Я собираю все в мини-css, который помещается в /assets/stylesheets/main.min.css. Все работало хорошо, пока я не начал вытаскивать библиотеки интерфейса с помощью webjars.

Вебджеры сами работают правильно, и я могу расслоить scss из них в мой основной css, но есть проблемы с привязкой scss от webjars, которые ссылаются на другие ресурсы. Например, font-awesome будет загружен в lib/font-awesome с помощью шрифтов в таких местах, как /assets/lib/font-awesome/fonts/fontawesome-webfont.eot. Проблема в том, что шрифт-awesome scss ссылается на него с ../fonts/fontawesome-webfont.eot, который после компиляции будет /assets/fonts/fontawesome-webfont.eot.

Я пропустил что-то здесь, или это еще не решены, из-за короткого времени, когда эта новая система была на месте? Если последнее, что вы считаете правильным решением здесь?

1. Должен ли я использовать плагин для перемещения/копирования ссылочных файлов в ожидаемую папку? OR
2. Должен ли компилятор/плагин SCSS переписывать пути в папку загрузки webjar? OR
3. Должен ли я включать шрифт-awesome minified css в виде отдельной ссылки?

Я склонен полагать, что (2) было бы правильным решением, поскольку scss в webjar, очевидно, ссылается на ресурс относительно scss. Это должно быть переписано относительно целевого css.

Answer 1

Это должно иметь лучшую поддержку, я работаю вокруг объявляя ссылку прямо в шаблоне:

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

Перед импортом попытки шрифта-удивительный в моем главном меньше:

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

Но импорт ведет себя так, как вы сказали, и не работает. Проблема в том, что вы хотите настроить меньше (и это причина использовать меньше), чем вы не можете сделать этот пролив вперед. Другая работа вокруг - помещать папку шрифтов в общую папку и совершать вместе.

Эта проблема возникает и в сассах и других ресурсах.

Answer 2

Вы просто должны добавить следующую строку в _variable.scss

$fa-font-path: "/assets/lib/font-awesome/fonts"; 

Смотрите здесь: http://fortawesome.github.io/Font-Awesome/get-started/#custom-less

Answer 3

Благодаря @ GSP59 я мог бы решить эту проблему, добавив следующую строку в моей main.scss файла справа до того шрифта, удивительным SCSS импорта:

$fa-font-path: "../lib/font-awesome/fonts"; 
@import "lib/font-awesome/scss/font-awesome.scss"; 

Обратите внимание, что не нужно добавлять к _variables.scss обязательно, если вы не У меня такой файл.