bootstrap CSS加載與引導sass，其他CSS將不會加載

我使用Bootstrap爲我的Rails應用程序與引導sass訴3.1.1，它一直工作得很好，在我的application.css .scss文件：bootstrap CSS加載與引導sass，其他CSS將不會加載

@import "bootstrap";

沒有別的。就在今天，我嘗試添加一些自己的CSS來增加樣式，這是我在Bootstrap中沒有得到的。這是對我的歡迎視圖/控制器，所以我剛纔添加它來welcome.css.scss

.complete-class { 
    text-decoration: line-through; 
}

從閱讀this section of the Rails Guides我的理解是，你可以包括像在這樣的清單welcome.css.scss一個CSS文件：

@import "bootstrap"; 

/* 
*= require_self 
*= require_tree . 
*/

這沒有成功應用我的CSS; welcome.css.scss也不會出現在head標籤中。

當我試圖調試這我遇到了一些奇怪的事情，我覺得我也應該指出：

1.錯誤導入引導

的Syntastic插件VIM有益指出錯誤：

File to import not found or unreadable: bootstrap. Load path: /home/stephen/code/blocitoff/app/assets/stylesheets

這很奇怪，因爲

一）此錯誤沒有，顯示出儘管我沒有改變的代碼，它是指（@import「引導」）

和

b中的前行了）引導程序仍然忠實地應用在我的頁面佈局中，並出現在head標籤中的資源中。

2.卸載自舉-SASS

我搜索上述錯誤，並發現其this issue建議我卸載和重新安裝引導-薩斯。儘管奇怪的是，即使卸載了寶石，bootstrap styilng仍保留在頁面上。

導軌的版本是4.1.5

移動所有的CSS到application.css.scss

由於似乎自舉正從裝載application.css.scss以某種方式我在那裏添加了我的CSS，但也沒有工作。

瀏覽器

最後，我認爲，如果引導不打算離開時，我卸載引導，青菜，那麼也許他們被緩存在

隱身模式我的瀏覽器？我認爲這並沒有在開發過程中發生，但以防萬一我在隱身模式下啓動了Chrome。仍然沒有變化。

不僅僅是搞清楚如何解決這個我真的想明白了一些什麼事就在這裏 - 希望我能得到怎樣的軌道資產管道工程的一個更好的主意。

來源

2014-09-23 Stephen Mariano Cabrera

的Gemfile

gem 'bootstrap-sass', '~> 3.2.0' 
gem 'sass-rails', '>= 3.2'

application.css

/* 
*= require shared/bootstrap-base 
*= require_self 
*/

應用程序/資產/樣式表/共享/自舉base.scss

@import "bootstrap";

來源

2014-09-23 19:06:27 itsnikolay

謝謝！只是好奇，你知道爲什麼引導樣式沒有消失，即使我刪除了寶石？那部分讓我很困惑。還有，我應該知道那些寶石的版本有什麼特別之處？ – 2014-09-23 19:32:33

可能服務器沒有重啓？在從'Gemfile'中刪除'bootstrap'行後，不要忘記再次運行'bundle'。 ;） – itsnikolay 2014-09-23 19:34:56

根據你必須刪除所有的一切'* = require_self和* = require_tree引導文件。 'from app/assets/stylesheets/application.css app/assets/stylesheets/application.scss – PerseP 2016-05-04 11:22:07

檢查Bootstrap-Sass documentation：

你application.css.scss必須具備：

/* 
*= require_self 
*= require_tree . 
*/ 

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

當然，你需要在你Gemfilebootstrap-sass寶石：

gem 'bootstrap-sass', '~> 3.2.0' 
gem 'sass-rails', '>= 3.2' 
gem 'autoprefixer-rails' # not necessary, but recommended

你不需要@import引導其他scss文件。

來源

2014-09-23 19:13:04

注意：當前的Bootstrap文檔中說刪除'application.css.scss'中的所有'require'和'require_tree'指令並使用'@只有進口''而不是。 – 2015-01-18 13:54:58

itsnikolay的回答是不錯的，但不seeem加載任何其他CSS文件。如果在application.css文件中包含行require_tree .，則會加載其他文件。

只有在這裏的問題是，因爲每個SCSS被混久了之前編譯CSS從引導SCSS混入可能無法正常工作。（見railscast Sass basics）。如果你不想從bootstrap中重新使用任何scss mixins，或者不知道我在說什麼，那麼你很可能忽略了這一點，只需在您的application.css文件中添加require tree行：

application.css

/* 
*= require shared/bootstrap-base 
*= require_tree . #This line specifically is what will load the other .scss 
*= require_self 
*/

否則，你想改變application.css到application.css.scss，然後使用SASS @import命令導入：

application.css.scss

/* 
*= require_self 
*/ 

@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import "my_custom_css_file"; 
@import "my_second_custom_css_file"; 
#etc...

有關管道是如何工作的，檢查出railscast on the asset pipeline更基本的信息。有點過時但絕對有用。

來源

2014-12-07 09:29:37 Josh

bootstrap CSS加載與引導sass，其他CSS將不會加載

回答

相關問題