如何在 playframework 中自定义/主题 Bootstrap 4？答案

【问题标题】：How to customize / theme Bootstrap 4 in playframework?如何在 playframework 中自定义/主题 Bootstrap 4？
【发布时间】：2022-02-03 15:13:37
【问题描述】：

我想在 play framework 2.6 应用程序 (scala) 中使用和自定义 bootstrap 4（目前处于测试阶段）。

自定义是指创建自己的 css 类或更改现有变量，例如容器宽度、默认按钮的颜色……

我该怎么办？我的假设是，这样做的正确方法是以某种方式将 sass 编译集成到我的 play 框架应用程序中，以便在所有必要的地方获取对核心引导变量的相关更改？

到目前为止，我所做的是：在 build.sbt 中，将 "org.webjars" % "bootstrap" % "4.0.0-beta" 添加到 libraryDependencies。

在plugins.sbt中，添加addSbtPlugin("org.irundaia.sbt" % "sbt-sassify" % "1.4.4")

在我的 app\assets\css\main.scss 中，添加了@import "lib/bootstrap/css/bootstrap";。现在，引导 css 已与我的自定义 css 正确捆绑。

我现在如何更改引导变量？在自定义文档 (https://getbootstrap.com/docs/4.0/getting-started/options/#customizing-variables) 文档中，它说有一个名为 _variables.scss 的文件可以完成此操作。该文件在 webjar 内容被提取到的 /lib/bootstrap/css 中不存在。

【问题讨论】：

【解决方案1】：

SASS 集成

特别需要添加sbt-sassify插件：

addSbtPlugin("org.irundaia.sbt" % "sbt-sassify" % "1.4.4")

【讨论】：

【解决方案2】：

在 bootstrap 4.3.1 中测试 ("org.webjars" % "bootstrap" % "4.3.1")

关于_variables.scss，它在我的环境中位于/lib/bootstrap/scss/_variable.scss。

要自定义，change the theme 并导入引导程序如下在 assets/stylesheets/main.scss 或 main.scss 导入的 scss 文件中。

//change theme
$theme-colors: (
  "primary": red,
);

// import booststrap
@import "lib/bootstrap/scss/bootstrap.scss";

【讨论】：