Sass includes 및 Webjars

Question

Play 프로젝트를 2.3으로 마이그레이션 중이며 ShaggyYeti의 sbt-sass plugin (변경 번호는 play-sass plugin)을 사용하여 SCSS 파일을 컴파일했습니다. 나는 /assets/stylesheets/main.min.css에 배치되는 축소 된 CSS에 모든 것을 묶어. webjars를 사용하여 프론트 엔드 라이브러리를 가져 오기 전까지는 모든 작업이 올바르게 수행되었습니다.

webjars 자체가 올바르게 작동하고 scss를 내 주 CSS로 묶을 수 있지만 다른 리소스를 참조하는 webjars에서 scss를 묶는 데 문제가 있습니다. 예를 들어 font-awesome은 /assets/lib/font-awesome/fonts/fontawesome-webfont.eot 같은 글꼴로 lib/font-awesome에 다운로드됩니다. 문제는 font-awesome scss가 ../fonts/fontawesome-webfont.eot으로 참조한다는 것입니다. 컴파일 후 /assets/fonts/fontawesome-webfont.eot이됩니다.

여기에 뭔가가 누락되었거나, 아직 해결되지 않은 단점이 있습니까?이 새로운 시스템이 설치된 짧은 시간 때문에? 후자의 경우 여기에서 적절한 해결책이라고 생각하십니까?

1. 예상되는 폴더에서 참조 된 파일을 이동/복사하려면 플러그인을 사용해야합니까? 또는
2. SCSS 컴파일러/플러그인이 webjar 다운로드 폴더의 경로를 다시 작성해야합니까? 또는
3. 글꼴 - 멋진 미니 CSS를 별도의 링크로 포함해야합니까?

나는 webjar의 scss가 scss와 관련된 자원을 분명히 참조하고 있기 때문에 (2) 적절한 해결책이라고 생각하는 경향이 있습니다. 그것은 대상 CSS에 상대적으로 다시 작성되어야합니다.

Answer 1

이 더 나은 지원을해야한다, 나는 주위 템플릿에서 직접 참조 선언 일 :의 시도를 가져 오기 전에

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

을 글꼴을-멋진 내 주요 작 :

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

그러나 수입은 당신이 말한대로 행동하고 일하지 않습니다. 문제는 당신이 그 해협을 앞으로 나아갈 수없는 것보다 적은 것을 (그리고 더 적게 사용하는 이유 인) 맞춤화하기를 원하는 경우입니다. 또 다른 해결 방법은 공용 폴더에 fonts 폴더를 놓고 함께 커밋하는 것입니다.

이 문제는 저음 및 기타 리소스에서도 발생합니다.

Answer 2

당신은 당신의 _variable.scss에 다음 줄을 추가해야

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

여기를 참조하십시오 : @ GSP59에 http://fortawesome.github.io/Font-Awesome/get-started/#custom-less

Answer 3

덕분에 내 main.scss 파일 오른쪽에 다음 줄을 추가하여 해결할 수 당신의 경우 돈 필요 _variables.scss에 추가 할 필요가 없다고

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

참고 : 글꼴 멋진하는 SCS 가져 오기 전에 그런 파일은 없어.