Question

我有一个位于

的bootstrap.css文件

C：\用户\排版\ Play_Framework \ TEST1 \公共\样式表\ bootstrap.css

我需要将此链接到位于

的登录页面

C：\用户\排版\ Play_Framework \ TEST1 \应用\视图\ cal_login.scala.html

我在我的HTML页面中尝试了这个

link rel =＆＃34; stylesheet＆＃34;类型=＆＃34;文本/ CSS＆＃34; HREF =＆＃34; .... /公共/样式表/ bootstrap.css＆＃34;

以及

link rel =＆＃34; stylesheet＆＃34;类型=＆＃34;文本/ CSS＆＃34; HREF =＆＃34; ../../公共/样式表/ bootstrap.css＆＃34;

但页面看起来仍然没有css内容。另外，当我在eclipse中打开Play 2.2.2项目时，我无法找到我的引导程序文件。我编译并尝试重新打开，但文件没有被编译并添加到样式表目录。

Answer 1

在视图中，对资产使用默认路径（您可以在conf/routes文件的底部找到它：

<link rel="stylesheet" type="text/css" href='@routes.Assets.at("stylesheets/bootstrap.css")' />

它构建了/public目录中资产的正确路径。

事实上，如果你知道的话，你也可以在视图中使用硬编码的路径：

<link rel="stylesheet" type="text/css" href='/assets/stylesheets/bootstrap.css' />

但如果您将来决定将/assets/...更改为/my-aasets/...，则需要手动修复所有事件。

提示您不需要将Bootstrap（或其他JS库）拆分为最初由Play创建的文件夹，而是将它们保持在原始结构中更好！

只需下载Bootzrap并将其解压缩到/public/bootstrap/文件夹，然后在视图/布局中添加正确的路径：

<link rel="stylesheet" type="text/css" href='@routes.Assets.at("bootstrap/css/bootstrap.css")' />
<script  type="text/javascript" src='@routes.Assets.at("bootstrap/js/bootstrap.js")'></script>

请记住，某些库之间存在关系，即样式和图像（和/或脚本）之间的关系，因此拆分它们需要修复代码中的绝对冗余。

Answer 2

我会使用 webjars，而不是将引导程序复制到公共文件夹中。您只需添加

libraryDependencies += "org.webjars" % "bootstrap" % "5.0.0-beta1"

到您的build.sbt。然后你可以在你的视图中使用它：

<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("lib/bootstrap/css/bootstrap.min.css")">

对于下一个引导程序版本，您只需更新 build.sbt 文件中的依赖项。

将bootstrap.css文件链接到Play框架中的scala.html页面

2 个答案: