将 Bootstrap 主题（带有自定义 CSS 和 JS 插件）与带有 Webpacker 和 Yarn/NPM 的 Rails 6 集成

Posted 2023-02-16

【中文标题】将 Bootstrap 主题（带有自定义 CSS 和 JS 插件）与带有 Webpacker 和 Yarn/NPM 的 Rails 6 集成

【英文标题】：Integrating a Bootstrap theme (with custom CSS and JS plugins) with Rails 6 with Webpacker and Yarn/NPM

【发布时间】：2021-05-15 19:24:18

【问题描述】：

我有一个具有以下目录结构的主题：

+theme
 -index.html
 -file0.html
 ...
 -fileX.html
 +css
  -theme.css
  -theme.min.css
  ...
  -some.css
  -some.min.css
 +js
  -theme.js
  -theme.min.js
 +vendor
  +plugin0
   -plugin0.js
   -plugin0.min.js
  +pluginX
   -pluginX.js
   -pluginX.min.js
 +images
  -image0.jpg
  ...
  -imageX.jpg
  +svg
  -image0.svg
  ...
  -imageX.svg

我想使用 Webpacker 和包管理器（如 Yarn 或 NPM）将主题与 Rails 6 集成。

到目前为止：

我已经安装了Webpacker，并在environment.js进行了配置。 我已经使用Yarn 安装了vendor 文件夹中的所有js plugins。 我已将所有已安装的插件导入到我的application.js 文件中（使用@import 'plugin'）。 我通过在app/javascript/packs/ 中包含相应的.js 文件并在我的application.html.erb 文件中使用<script src=""></script> 来导入通过Yarn 不可用的插件。 我已将theme.css 导入到我的applications.scss 文件中（使用@import 'theme.css）。

这就是乐趣的开始：90% 的主题似乎工作正常，但这里缺少一些 css，那里缺少一些 javascript，开发者工具控制台中没有明确的错误或警告消息。

我了解您无法为这个（或任何）特定主题提供帮助，但我希望我的主题集成过程中有问题，或者您可以建议一个实际 100% 有效的不同主题。

如果需要，我可以为您提供实际的 application.js 和 application.html.erb 文件以及无法正常运行的 js 插件的名称 - 我只是不希望问题太大。

【问题讨论】：

祝你好运！我前一阵子试过了，但卡住了。最终从头开始编写了一些 JS。我做的另一件事是当它使用来自其他库的一些 JS 时，我也只是将它们导入到我的项目中。

@sam 你把那些js 文件放在哪个文件夹里了？

在app/javascript 内。例如，我有一个使用Flatpickr 的主题，但我无法让主题的js 正常工作。所以我通过yarn添加了flatpickr并创建了一个文件app/javascript/date_picker.js。我在其中添加了import flatpickr from "flatpickr"，然后添加了一个监听器，用于加载涡轮链接。

@sam 如果您可以对下面的答案进行更多分析，我也会自己尝试一下，让您知道它是否对我有用，并在任何情况下都支持您！还是谢谢！

【参考方案1】：

我没有一个简单的答案给你，但有几个可能的解决方案。以下是我在 Bootstrap 主题的类似船上时所做的几件事。

将引导程序与主题的 JS 一起单独导入。为了做到这一点，我将主题的 theme.min.js 文件移动到 app/javascript 中，然后将其导入。

# app/javascript/packs/application.js
require("bootstrap")
require("theme.min")

尝试手动添加主题使用的任何额外库。例如，我有一个使用Flatpickr 选择日期的主题。我跑了yarn add flatpickr，然后制作了一个js文件来使用它：

# app/javascript/date_picker.js
import flatpickr from "flatpickr"

document.addEventListener('turbolinks:load', () => 
  document.querySelectorAll(".flatpickr").forEach((element) => 
    flatpickr(element, 
      altInput: true,
      altFormat: "F j, Y",
    )
  )
)

# app/javascript/packs/application.js
require("date_picker")

最后，如果这不起作用，请手动编写 JS。

老实说，这三个解决方案中的每一个都适用于部分主题的 JS。您可能还需要手动添加一些 CSS。为此，我在我的 javascript 目录中添加了一个 css 文件夹，将主题的源 CSS 放在该文件夹中，然后导入它。

# app/javascript/packs/application.js
import "css/site"

# app/javascript/css/site.scss
@import "theme.min.css";
@import "feather.css";
@import "flatpickr.min.css";
@import "quill.core.css";
@import "vs2015.css";

其中很多主题都可以从源文件构建到 dist 文件夹（或类似文件夹）。我认为我使用的那个是 gulp 构建的。