资产管道中的SCSS和CSS组织

时间:2015-11-03 21:17:02

标签: ruby-on-rails asset-pipeline

所以,我可能在这里完全错了,但是我正在尝试组织我的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清单文件中,我的方法是否完全错误?

由于

2 个答案:

答案 0 :(得分:1)

在开发环境中,Rails会为您加载单个文件,以便于调试。

要关闭此功能,请在开发环境文件中将config.assets.debug设置为false,即config/environments/development.rb,然后重新启动Rails应用。

答案 1 :(得分:1)

您显示空的vendor.css文件的原因是因为您没有在其中放置任何内容(除了注释以将文件包含在vendor文件夹中)。这是预期的Rails行为 - 任何.css或.scss文件都可以包含指示资产管道包含其他文件以及CSS或SCSS代码的注释。如果文件只包含指令(在开发模式下),您将看到一个空文件。在生产中,这无关紧要,因为您将预先编译所有资产,最终得到HTML中包含的单个.css文件。