使用bootstrap-sass時應該如何管理sass代碼？

Question

The documentation說：

導入引導樣式應用程序/資產/樣式表/ application.scss：

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables" 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 

引導鏈輪必須引導的圖標字體的工作之前進口。

確保文件具有.scss擴展名（或.sass for Sass語法）。如果您剛剛生成了新的Rails應用程序，則可能會附帶.css文件。如果該文件存在，將送達，而不是無禮的話，那麼將其重命名：

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss 

然後，從文件中刪除所有// =需要和// = require_tree語句。相反，使用@import導入Sass文件。

不要在Sass中使用// = require，否則您的其他樣式表將無法訪問Bootstrap組合變量或變量。

但是，如果按照他們的說法，我的其他樣式表將不會自動包含，就像他們之前那樣。我應該在佈局中明確包含每個樣式表嗎？ AFAIU，這也會讓我在生產環境中有單獨的樣式表，而不是像沒有bootstrap-sass那樣的樣式表。

Answer 1

這裏有幾件事。首先，默認情況下，每個樣式表都在開發中的單獨http請求中提供服務，並且在生產中的一個請求中（它們被預編譯爲一個文件）。如果我們遵循這些文檔，我們最終也會得到一個開發請求，這會消除僅編譯已更改文件的性能優勢。If we don't，我們最終可能會在我們的樣式表中多次出現bootstrap。如果我們need some variables or mixinsin several stylesheets。

所以我建議有這樣說：

application.sass（做筆記，我require_tree .之前把require_self）：

/* 
*= require_self 
*= require_tree . 
*/ 
// import bootstrap once 
@import "bootstrap-sprockets" 
@import "bootstrap" 
.d1 
    text-align: center 

welcome.sass：

// in other files import only some particular partials 
@import "bootstrap/variables" 
@import "bootstrap/mixins" 
.d2 
    text-align: right 

Answer 2

但是，如果按照他們的說法，我的其他樣式表將不會自動包含在內，就像他們之前那樣。

是的，你是對的。

1）您不應該從application.scss中刪除您的require指令。他們不想使用require指令，因爲在這種情況下，您無法在包含文件中使用SASS變量和mixin。

2）只需將application.css重命名爲application.scss即可。他們需要它，因爲在這種情況下，您將能夠在application.scss文件內使用@import指令。這意味着你將能夠在包含文件中使用SASS變量和mixin。

我應該從佈局中明確包含每個樣式表嗎？

沒有，只是讓他們在application.scss

AFAIU，這也將讓我有不同的樣式表在生產環境中，而不是之一，因爲它本來沒有引導，薩斯。

不，您將在不同的環境中使用一個application.scss。