CODEWITHSUNDEEP
ruby-on-railsasset-pipeline
Abram
Abram

Reputation: 41884

SCSS and CSS Organization in Asset Pipeline

So, I may be completely wrong here, but I am trying to organize my css files so that scss files are loaded up first, with some css files being loaded up later.

Here is my 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";

I also have a vendor.css file which has:

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

In my application.html.erb I have:

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

However, when I view source in development, I see that application.css loads up fine, followed by all the assets in the vendor folder, followed by an empty vendor.css manifest file

<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" />

Why aren't these files loading in the vendor.css manifest file, and am I completely wrong in my approach here?

Thanks

Upvotes: 0

Views: 201

Answers (2)

neuronaut
neuronaut

Reputation: 2709

The reason you have an empty vendor.css file showing up is because you haven't put anything in it (other than the comment to include the files in the vendor folder). This is expected Rails behavior -- any .css or .scss file can contain both comments that direct the asset pipeline to include other files as well as CSS or SCSS code. If a file contains only directives then (in development mode) you'll see an empty file. In production this won't matter since you'll precompile all your assets and end up with a single .css file included in the HTML.

Upvotes: 1

sjagr
sjagr

Reputation: 16502

In the development environment Rails will load the individual files for you, for easier debugging.

To turn this off, set config.assets.debug to false in your development environment file i.e. config/environments/development.rb and restart your Rails app.

Upvotes: 1

Related Questions