3

我正在将一个 Play 项目迁移到 2.3，并使用 ShaggyYeti 的sbt-sass 插件（对play-sass 插件的更改）编译了我的 SCSS 文件。我将所有内容捆绑到一个缩小的 css 中，该 css 被放置在/assets/stylesheets/main.min.css. 一切正常，直到我开始使用 webjars 提取前端库。

webjars 本身可以正常工作，我可以将它们中的 scss 捆绑到我的主 css 中，但是从引用其他资源的 webjars 中捆绑 scss 存在问题。例如font-awesome将lib/font-awesome与字体一起下载到/assets/lib/font-awesome/fonts/fontawesome-webfont.eot. 问题是 font-awesome scss 引用了它../fonts/fontawesome-webfont.eot，编译后将是/assets/fonts/fontawesome-webfont.eot.

我是否在这里遗漏了一些东西，或者这些是由于这个新系统到位时间很短而尚未解决的怪癖？如果是后者，您认为这里的正确解决方案是什么？

  1. 我应该使用插件来移动/复制预期文件夹中的引用文件吗？或者
  2. SCSS 编译器/插件是否应该重写 webjar 下载文件夹的路径？或者
  3. 我应该将 font-awesome 缩小的 css 包含为单独的链接吗？

我倾向于相信（2）将是正确的解决方案，因为 webjar 中的 scss 显然是在引用相对于 scss 的资源。这应该相对于目标 css 重写。

4

3 回答 3

2

这应该有更好的支持，我解决了在模板中直接声明引用：

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

在尝试将 font-awesome 导入我的主要内容之前：

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

但是导入的行为如您所说并且不起作用。问题是，如果您想自定义 less（这就是使用 less 的原因），那么您就无法做到这一点。另一种解决方法是将字体文件夹放在公用文件夹中并一起提交。

这个问题也发生在 sass 和其他资源中。

于 2014-10-26T01:36:18.133 回答
1

您只需将以下行添加到您的 _variable.scss

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

见这里： http: //fortawesome.github.io/Font-Awesome/get-started/#custom-less

于 2014-11-07T17:27:17.580 回答
0

感谢@GSP59，我可以通过main.scss在 font-awesome scss 导入之前将以下行添加到我的文件中来解决它：

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

_variables.scss请注意，如果您没有此类文件，则不一定需要添加它。

于 2017-06-24T19:57:24.813 回答