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

Posted 2023-05-07

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

【英文标题】：Link bootstrap.css file to scala.html page in Play framework

【发布时间】：2014-04-30 13:06:58

【问题描述】：

我有一个 bootstrap.css 文件位于

C:\Users\comp\Play_Framework\test1\public\stylesheets\bootstrap.css

我需要将此链接到我的登录页面，位于

C:\Users\comp\Play_Framework\test1\app\views\cal_login.scala.html

我已经在我的 HTML 页面中尝试过这个

link rel="stylesheet" type="text/css" href="..../public/stylesheets/bootstrap.css"

还有

link rel="stylesheet" type="text/css" href="../../public/stylesheets/bootstrap.css"

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

【参考方案1】：

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

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

它在/public 目录中建立资产的正确路径。

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

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

但是，如果您将来决定将 /assets/... 更改为 /my-aasets/...，您将需要手动修复所有出现的情况。

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

只需将 Bootstrap 下载并解压缩到 /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>

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

【讨论】：

是的.. 没有错误.. 非常感谢@biesior 我也会尝试其他部分...

【参考方案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 文件中的依赖项。