所以,我可能在这里完全错了,但是我正在尝试组织我的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
清单文件中,我的方法是否完全错误?
由于
答案 0 :(得分:1)
在开发环境中,Rails会为您加载单个文件,以便于调试。
要关闭此功能,请在开发环境文件中将config.assets.debug
设置为false
,即config/environments/development.rb
,然后重新启动Rails应用。
答案 1 :(得分:1)
您显示空的vendor.css文件的原因是因为您没有在其中放置任何内容(除了注释以将文件包含在vendor文件夹中)。这是预期的Rails行为 - 任何.css或.scss文件都可以包含指示资产管道包含其他文件以及CSS或SCSS代码的注释。如果文件只包含指令(在开发模式下),您将看到一个空文件。在生产中,这无关紧要,因为您将预先编译所有资产,最终得到HTML中包含的单个.css文件。