資產管道中的SCSS和CSS組織

Question

因此，我可能在這裏完全錯誤，但我試圖組織我的css文件，以便scss文件首先加載，稍後加載一些css文件。

這裏是我的application.scss

// Core 
@import "core/reset.scss"; 
@import "core/constants.scss"; 
@import "core/mixins.scss"; 
@import "core/helpers.scss"; 

// Template 
@import "template/main_navigation.scss"; 
@import "template/header.scss"; 
@import "template/footer.scss"; 
@import "template/template.scss"; 

// Components 
@import "components/scorecard.scss"; 
@import "components/support.scss"; 
@import "components/event_report.scss"; 
@import "components/select2-small.scss"; 
@import "components/progress_bar.scss"; 
@import "components/carousel.scss"; 
@import "components/collapsible.scss"; 
@import "components/forms.scss"; 
@import "components/form_validations.scss"; 
@import "components/jquery_ui_customized.scss"; 
@import "components/screen.scss"; 

// Overrides 
@import "components/jquery_ui_overrides.scss"; 
@import "components/chosen_overrides.scss"; 
@import "components/multiselect_override.scss"; 
@import "components/qtip_overrides.scss"; 

// Gem load 
@import "font-awesome"; 

我也有一個vendor.css文件，該文件有：

/* 
*= require_tree ./vendor <- points to a subfolder with a bunch of css files 
*/ 

在我application.html.erb我：

<%= stylesheet_link_tag "application", media: "all" %> 
    <%= stylesheet_link_tag "vendor", media: "all" %> 

然而，當我在開發過程中查看源代碼時，我發現application.css的加載效果很好所有資產在vendor文件夾結婚，隨後是空vendor.css清單文件

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/chosen.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/colorPicker.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/confirm.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/demo_table.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/fancybox.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/forms.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/jquery-ui-numeric-min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/jquery-ui-numeric.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/jquery-ui.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/jquery.checkboxtree.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/jquery.checkboxtree.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/jquery.chosen.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/jquery.multiselect.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/jquery.qtip.nightly.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/jquery.qtip.nightly.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/jquery_ui_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/scaffold.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/select2-small.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/select2-small.css.map?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/select2.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/select2.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor/strength.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/vendor.css?body=1" media="all" rel="stylesheet" type="text/css" /> 

爲什麼不是這些文件在vendor.css清單文件加載，並在我的方法是我完全錯在這裏？

謝謝

Answer 1

在開發環境中，Rails會爲你加載單個文件，以方便調試。

要關閉此功能，請在您的開發環境文件（即config/environments/development.rb）中將config.assets.debug設置爲false，然後重新啓動您的Rails應用程序。

Answer 2

你有一個空的vendor.css文件顯示的原因是你沒有放入任何東西（除了註釋包括在供應商文件夾中的文件）。這是預期的Rails行爲 - 任何.css或.scss文件都可以同時包含引導資產管道以包含其他文件以及CSS或SCSS代碼的註釋。如果一個文件只包含指令，那麼（在開發模式下）你會看到一個空文件。在生產中，這不會影響，因爲您將預編譯所有資產，並最終生成包含在HTML中的單個.css文件。