导轨引导程序答案

【问题标题】：Rails Bootstrap导轨引导程序
【发布时间】：2017-08-12 04:09:04
【问题描述】：

嘿，Bootstrap 无法在我的 Rails 应用程序（Rails 5.0.5）上运行。我按照这个步骤https://github.com/twbs/bootstrap-rubygem。这是我的文件：

//= require reset
//= require_self
//= require_tree . 
@import "bootstrap";

应用程序.scss

//= require jquery
//= require tether
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

应用程序.js

gem 'bootstrap', '~> 4.0.0.alpha6'
gem 'sprockets', '~> 3.0'

Gemfile（我执行捆绑安装之后）

【问题讨论】：

顺便说一句，你应该试试 Gem 版本 4.0.0.beta - 它是更新的

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

【解决方案1】：

然后，从 Sass 文件中删除所有 *= require 和 *= require_tree 语句。相反，使用 @import 来导入 Sass 文件。

不要在 Sass 中使用 *= require，否则您的其他样式表将无法访问 Bootstrap 混合和变量。

Bootstrap JavaScript 依赖于 jQuery。如果您使用的是 Rails 5.1+，请将 jquery-rails gem 添加到您的 Gemfile：

gem 'jquery-rails'

应用程序.scss

@import "reset";
@import "bootstrap";

应用程序.js

//= require jquery
//= require jquery_ujs
//= require tether
//= require bootstrap-sprockets
//= require turbolinks

gem 'bootstrap', '~> 4.0.0.alpha6'
gem 'sprockets', '~> 3.0'

重启服务器使用 f12 检查您的管道中是否有资产

简单的解决方案。如果您没有这些文件，只需前往bootstrap.com，下载文件，将css 和js 文件复制到您的/vendor/assets/stylesheets 和/vendor/assets/javascripts，然后将它们包含在您的application.js 和@987654331 中@ 与 @import 语句。

尝试使用 rails assets:precompile 预编译您的资产

【讨论】：

@PoloD.Vargas 我认为您丢失了清单文件application.js 和application.scss。因此，您需要先使用 rails 控制台Rails.application.config.assets.paths 的以下输出更新您的帖子，以便我阅读。然后由于您在资产管道中没有manifest 文件，因此在config/initializers/assets.rb 文件的底部包含以下行Rails.application.config.assets.precompile += %w( application.js ) 和Rails.application.config.assets.precompile += %w( application.scss )，然后运行rails assets:precompile

【解决方案2】：

您混淆了 Sprocket 需要语法和 Sass 的导入。为了保持您之前所做的，您将使用

来包含引导程序

//= require reset
//= require bootstrap
//= require_self
//= require_tree .

和

//= require jquery
//= require tether
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

【讨论】：

【解决方案3】：

我修复了更新 Rails 版本并遵循下一个指南的问题。希望它可以帮助某人，这很容易，只需几个步骤就可以了。 https://www.railstutorial.org/book/filling_in_the_layout#sec-custom_css

【讨论】：