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

【问题标题】：How to add Bootstrap v5 to your Ruby On Rails app如何将 Bootstrap v5 添加到您的 Ruby On Rails 应用程序
【发布时间】：2021-06-21 11:31:08
【问题描述】：

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

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

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

【问题讨论】：

在这里阅读整个过程 - digitalocean.com/community/tutorials/…
感谢 @LovekeshKumar 我真的很喜欢 Digital Ocean 指南，所以这很棒。它确实提到了使用选项 1 的一些优点。

标签： twitter-bootstrap rubygems ruby-on-rails-6 bootstrap-5

【解决方案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 手动安装它。保存并刷新，它现在应该可以工作了。

【讨论】：

【解决方案2】：

Yarn 是 Rails 附带的前端包管理器。如果您想以 Rails 的方式进行操作，只需在项目目录中运行 yarn add bootstrap，Yarn 将为您处理下载引导程序。然后，您可以在应用程序清单中导入引导 .css 和 .js 文件。

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

【讨论】：