我无法在我的 Ruby on Rails 应用程序中集成 Bootstrap答案

【问题标题】：I can't Integrate Bootstrap in my Ruby on Rails App我无法在我的 Ruby on Rails 应用程序中集成 Bootstrap
【发布时间】：2018-11-04 03:32:42
【问题描述】：

我已经尝试了所有教程和指南，但我无法将引导程序集成到我的 rails 应用程序中我试过 bootstrap-sass gem、bootstrap CDN、bootstrap gem

Ruby on Rails 版本 5.2.0 Ruby 版本 2.2.6

完全遵循这些教程并取得了 0 个结果：

用于引导 sass https://github.com/twbs/bootstrap-sass

用于引导https://github.com/twbs/bootstrap

尝试使用引导 CDN https://www.bootstrapcdn.com/

我已经被这个问题困住了好几个星期，尝试自己解决它，关注了许多博客文章和 StackOverflow 答案并尝试了所有方法。 rails 5.2版本有问题吗？或我的操作系统 windows 10 我的 gem 文件中是否缺少 gem？

编辑：我可以成功运行捆绑安装，在 application.html.erb 的 head 标记中添加 CDN 并不能解决我的问题我面临的问题是无论我尝试什么方法都无法使用引导程序

宝石文件：

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.2.6'


gem 'rails', '~> 5.2.0'


gem 'sqlite3'


gem 'puma', '~> 3.11'


gem 'coffee-script-source', '1.8.0'


gem 'bootstrap-sass', '~> 3.3.7'


gem 'sass-rails', '~> 5.0'


gem 'jquery-rails'


gem 'uglifier', '>= 1.3.0'


gem 'duktape'


gem 'coffee-rails', '~> 4.2'


gem 'turbolinks', '~> 5'


gem 'jbuilder', '~> 2.5'


gem 'bootsnap', '>= 1.1.0', require: false

【问题讨论】：

你能成功bundle install吗？
尝试在application.html.erb的head部分添加cdn链接肯定会起作用
您需要提供您所面临的确切错误。此外，使用 linux 而不是 windows 可能会有所帮助
你想做什么但不起作用？您能否展示您尝试使用的视图代码的最小示例？如果您尝试在新的 Rails 应用程序中使用引导程序会发生什么，您可以让它在那里工作吗？
您能否提供更多详细信息？是什么让您认为 Bootstrap 没有正确安装？

标签： ruby-on-rails ruby bootstrap-4 bootstrap-sass ruby-on-rails-5.2

【解决方案1】：

也许试试这个：

1) Gemfile

# Add these gems. Rails is not including jQuery by default.
# You need to include it to use all bootstrap options.
gem 'bootstrap'
gem 'jquery-rails'

2) app/assets/javascripts/application.js

jquery3, popper, and bootstrap are the ones for bootstrap

//= require jquery3
//= require popper
//= require bootstrap

//= require rails-ujs
//= require turbolinks
//= require_tree .

3) app/assets/stylesheets/application.scss

@import 'bootstrap'; // assuming you changed to SCSS from CSS

4) 运行bundle 并重新启动您的服务器

这是一个使用 Rails 5.2 和 Bootstrap 4 的工作仓库 https://github.com/HoracioChavez/bootstrap-sample
在 macOS 上测试

【讨论】：

它不起作用，您知道我的应用程序有什么问题吗？我完全按照你在回答中所说的做了
我刚刚创建了一个 GitHub 存储库。我可以确认正在使用引导程序。但是，我使用的是 Mac，所以不确定 Windows 是否缺少某些东西。 github.com/HoracioChavez/bootstrap-sample

【解决方案2】：

你可以试试这个例子。它适用于我的项目。

在您的 Gemfile 中：

gem 'bootstrap-sass'
gem 'jquery-rails'

在您的 app/assets/javascripts/application.js

中

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

在您的 /app/assets/stylesheets/application.scss

*= require_tree .
*= require_self
*/

@import "bootstrap-sprockets";
@import "bootstrap";

安装所有 gem 并进行上述配置后，您可以尝试使用此引导程序下拉按钮测试您的引导程序工作。希望对你有帮助。

另外，请注意，我使用 bootstrap 3 并在 Linux Ubuntu 上工作。

【讨论】：

【解决方案3】：

适用于轨道 v5.2.0。

您只需要确保在 gem 文件中有 gem 'bootstrap-sass' 和 gem 'jquery-rails'。引导程序需要 JQuery。回到其他 rails 版本，即 v4.x，您必须包含很多其他 gems，但在这个版本中不再是它们是默认的，除了 bootstrap-sass 和 jquery-rails gem。
运行 bundle install 来安装 gems
然后更改默认清单文件app/assets/stylesheets/application.css 文件名到app/assets/application.scss(.sass) 因为我们需要导入（加载并执行）该文件，css 也不能这样做，因为我们打算包含的行是 sass 语法而不是 css 语法。
在样式表清单文件 (application.scss) 中包含 @import"bootstrap" 并在 application.js 中添加 //= require jquery。这会影响 app/views/layouts/application.html.erb 控制器中所有模板使用的所有布局的标准位置。在旧版本中，您必须require 其他扩展名，例如。 turbolink 以使引导程序有效且高效地工作，但在此版本中没有。

你完成了。您的所有网页现在都集成了引导程序。

【讨论】：