Bootstrap Sass with Rails 4

我想在我的rails（4.0.0）項目中使用bootstrap-sass（3.1.0.2）和sass-rails（4.0.1）。Bootstrap Sass with Rails 4

我application.css.scss文件看起來像這樣：

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the top of the 
* compiled file, but it's generally better to create a new file per style scope. 
* 
*= require_self 
*= require font-awesome 
*= require_tree . 
*/

我bootstrap_and_overrides.css.scss文件是在樣式表文件夾，如下所示：

@import "bootstrap";

我有一個測試頁面設置試試這個：

<div class="container"> 
<h2>test terms</h2> 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> 
<p class="bg-primary">.dfd..</p> 
<p class="bg-success">..sdfas.</p> 
<p class="bg-info">..sdfs.</p> 
<p class="bg-warning">.asdf..</p> 
<p class="bg-danger">.adf..</p> 
<p>test terms</p> 


<button type="button" class="btn btn-primary">Default</button> 

</div> 
<button type="button" class="btn btn-info">Info</button>

當我啓動服務器並訪問該頁面時，它重新純文本沒有引導樣式的nders。

任何想法做什麼，將不勝感激。看來這裏有幾個人不使用寶石。這種方法有什麼理由嗎？非常感謝！

來源

2014-02-08 Mel

可否請您發佈html頁面的來源？它可能有一些信息。如果可能的話，也是佈局文件 – Muntasim

您是否運行'捆綁包'？ –

您是否嘗試過在application.css.scss中需要引導程序？或者嘗試在conflig/application.rb中添加require（第二種方法，第一種方法返回錯誤） –

這裏是我的設置與https://github.com/twbs/bootstrap-sass：

# Gemfile 
gem 'bootstrap-sass' 

# application.css.scss 
/* 
*= require_self 
*= require vendor 
* require_tree . 
*/ 

@import "bootstrap"; 

// Import individual stylesheet 
@import "base"; /* app/assets/stylesheets/base.css.scss */ 
@import "events"; /* app/assets/stylesheets/events.css.scss */

require_tree .被禁用，但不是導入單個CSS文件（base，events）。

來源

2014-02-08 08:52:49 Victor

嗨，維克多，感謝您的分享。我想知道css行爲的順序是否重要。我在樣式表文件夾中的一個單獨的文件中導入了引導程序，該文件夾被該樹拾取。我已經嘗試過你的設置，並沒有任何運氣，但會嘗試創建一個新項目 - 也許有其他地方的東西，導致它不工作。非常感謝答覆。 – Mel

是的，CSS導入的順序很重要。在我的情況下，如果在我的'''events.css.scss'中我的'base.css.scss'中有'body {background：white}'，並且'body {background：red}'，'body''background '會變成'紅色'，因爲後者會覆蓋前面的CSS。使用https://github.com/twbs/bootstrap-sass – Victor

非常感謝。 – Mel

幾天前我面臨幾乎相同的問題。我的配置完全相同，但Bootstrap的幾個樣式效果不起作用（尤其是bg-whatever-color）。幾次更新後，問題消失。

我的一些寶石，我更新

gem 'rails', '4.0.3' 
gem "bootstrap-sass", "~> 3.1.1.0" 
gem 'font-awesome-sass' 
gem 'sass-rails', '~> 4.0.0'

不要忘了：我application.scss的

bundle update

部分給你一個想法

*= require jquery.ui.all 
*= require select2 
*= require font-awesome 
*/ 

@import "mixin_and_var"; 
// changing the breakpoint value before importing bootstrap style 
// This change is made for the menu (navbar) to collapse on tablet for better view 
$screen-sm:1024px; 
@import "bootstrap"; 

@import "general_layout"; 
@import "header"; 
@import "footer"; 
@import "menus"; 
@import "pagination"; 
@import 'login'; 
@import "error";

希望它有助於！

來源

2014-03-23 19:11:55

Bootstrap Sass with Rails 4

回答

相關問題