Rails引導程序

Hey Bootstrap不能在我的Rails應用程序（Rails 5.0.5）上工作。我按照這個步驟https://github.com/twbs/bootstrap-rubygem。下面是我的文件：Rails引導程序

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

application.scss

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

的application.js

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

的Gemfile（我EXEC包安裝後）

來源

2017-08-11 Polo D. Vargas

BTW可能是你應該嘗試寶石版4.0.0.beta - 這是最近 –

然後，刪除所有* = require和* =來自Sass文件的require_tree語句。相反，使用@import導入Sass文件。

請勿在Sass中使用* = require，否則您的其他樣式表將無法訪問Bootstrap組合變量和變量。

Bootstrap JavaScript依賴於jQuery。如果你正在使用Rails 5.1+，jQuery的護欄寶石添加到您的Gemfile：

寶石 'jQuery的軌道'

application.scss

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

的application.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和scss與@import聲明。

嘗試與rails assets:precompile

來源

2017-08-11 06:57:48

這裏是一張圖片http://imgur.com/3d7tzcjŸ沒有看到資產：■ –

@ 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' –

一種可能的替代

轉到預編譯的資產https://www.bootstrapcdn.com/你想要的鏈接（CSS或JS）

粘貼它複製到你的看法是這樣的：

For CSS

<%= stylesheet_link_tag '<paste it here>', media: 'all' %>

對於JavaScript

<%= javascript_include_tag '<paste it here>' %>

這樣，您就不需要使用寶石/ @進口/需要引導。

來源

2017-08-11 17:23:48 Jake

這並不回答關於包含bootstrap的問題。如果你在bootstrap源文件中使用自定義變量，包括來自CDN的建議不是很好 - 因爲它們不起作用。 –

我想你是對的，因爲我的答案更多的是一種替代解決方案。我已經更新了我的代碼以表明這一點，感謝您提及它！ – Jake

你正在混淆鏈輪需要語法和Sass的導入。爲了保持你以前做過，你會包括引導通過

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

和

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

來源

2017-08-11 17:44:40

我固定的問題來更新我的軌道版本和之後的下一個指南。希望它可以幫助別人，這很容易，只有幾個步驟得到它的工作。 https://www.railstutorial.org/book/filling_in_the_layout#sec-custom_css

來源

2017-08-11 20:09:04

回答

相關問題