问题描述
我正在尝试将 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
的指南