如何将 Bootstrap v5 添加到您的 Ruby On Rails 应用程序

如何解决如何将 Bootstrap v5 添加到您的 Ruby On Rails 应用程序

我正在尝试将 Bootstrap v5 添加到 Ruby On Rails v6 项目中，似乎有两种方法可以做到on getbootstrap.com installation docs

使用纱线：yarn add bootstrap
使用 RubyGem：gem 'bootstrap','~> 5.0.1'

这两者之间是否有首选方法？在特定情况下，一种比另一种更好吗？我想了解其中的区别，因为我找到的所有示例都使用第一个选项。

解决方法

经过一些研究，这就是我发现解决上述问题的方法。

方法 1 似乎是使用 Rails v6 Web 框架将 Bootstrap v5 添加到 Ruby 应用程序的首选方法。对于指定的 Bootstrap 和 Rails 版本（分别为 5 和 6），我找不到方法编号为 2 的单个指南/教程。我确实找到了用于以前版本的 Rails 的方法 2。

这些是我使用 Ruby on Rails v6 将 Bootstrap v5 添加到项目中的步骤

通过运行此命令 yarn add bootstrap popper.js 从命令行添加 Bootstrap 和 Popper.js。无需在 Bootstrap v5 上添加 jQuery 并确保您位于项目文件夹中
将 *= require bootstrap 添加到 app/assets/stylesheets/application.css。是的，require 和 bootstrap 之间有一个空格。现在您的文件应如下所示：

在 config/webpack/environment.js 中添加以下代码：

const webpack = require('webpack')

environment.plugins.append('Provide',new webpack.ProvidePlugin({
  Popper: ['popper.js','default']
}))

记得保存并刷新您的页面，如果需要，请使用 rails server 重新启动您的应用。

如果按照这些步骤操作后，JavaScript 仍然不起作用（例如下拉菜单或移动设备上的导航栏未展开），请检查您的浏览器控制台。如果您看到有关 can't find @popperjs/core 的错误，则表示 @popperjs/core 是 Bootstrap 的依赖项，但未安装。使用 yarn add @popperjs/core 手动安装。保存并刷新，现在应该可以使用了。

Yarn 是 Rails 附带的前端包管理器然后，您可以在应用程序清单中导入引导程序 .css 和 .js 文件。

还有我写的关于将 bootstrap 和 fontawsome 添加到 rails 6 https://dev.to/shahershamroukh/add-bootstrap-and-fontawesome-to-your-ruby-on-rails-6-application-3fm7

的指南