Rails 3.1 Load css in particular order
It is better to specify the order of each and every files manually:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require reset
*= require groups
*= require the_last
*
Is it possible to control the order .CSS files are read by Rails or is it fixed by convention?
SCSS
I believe the require_tree
directive loads the files in alphabetical order
If you want to load the files in your own order, you may be interested in looking into using the @import
functionality of scss
(the Rails default CSS preprocessor)
You'll be able to do the following:
#app/assets/stylesheets/application.css.scss
@import bootstrap
@import todo
@import **/* /* Directory Globbing ;-) */
--
This will allow you to load the individual files / directories you require in the order you require
How does one load a CSS framework in Rails 3.1?
Even though Rails 3.1 (RC) allows use of SASS files-- it doesn't force it.
Files in your /public/stylesheets
will still be served just fine.
If you wish to activate the SASS parser (and utilize the new framework), rename your my_styles.css
to be my_styles.css.scss
and put it in the /app/assets/stylesheets
folder. Then include just your application.css
in your application.erb.html
after uncommenting out the require_self / require_tree lines in it.
For more info, here is a blog i pulled up after a quick google search: http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html
As for the IE 8 thing. There was a bug in IE not not always executing conditions, so try
<!--[if IE 8.000]><!-->
<link href='./design/style-ie-8.css' rel='stylesheet' type='text/css' />
<!--<![endif]-->
its a bit of hackery to try and reset the parser to execute the rule
Javascript and CSS specific files, how to include them by convention ? Rails 3.1
In the application.css
and application.js
file, be sure to remove the line \\= require tree
.
Then, manually list all the css/js files you want included in each manifest file, for example:
// application.js
//= global.js
//= everywhere.js
Then, I would setup a yield in your header or your closing body tag for your application layout file, for instance (in haml)
%head
%title Some Page
= stylesheet_link_tag 'application'
= yield :stylesheets
Then in your particular view, say _example_partial.html.haml
, do this:
- content_for :stylesheets do
= stylesheet_link_tag 'example_partial'
-# the rest of your view goes here
You do the exact same thing with Javascript files, just using javascript_include_tag
instead of stylesheet_link_tag
.
This will let you quickly and easily assemble view-specific javascript / css payloads. There may be a more sophisticated way to handle this using the asset pipeline, but I would suggest that if the asset pipeline is already minifying and merging you major stylesheets that this kind of +1 css / js file per view is not going to cause a major performance hit. Just try to make sure you don't overdo it with dozens of separate files loading into a single view.
Adding page-specific CSS to Rails Asset Pipeline
I found this blog post to be very helpful: http://blog.seancarpenter.net/2012/11/05/page-specific-javascript-with-the-asset-pipeline/. My answer paraphrases what this blogger already wrote and fills in a few missing details.
First, it's important that you've read and understood the Rails Guide to the Asset Pipeline. Unfortunately, this guide doesn't clearly explain how to add action-specific assets, but it does cover some concepts you need to know. Made sure you understand these ideas:
- That the asset pipeline compiles Javascript, CSS, and other assets so that Rails servers can cache assets for better performance.
- That manifest files use commands like
require
,require_tree
, andrequire_self
to indicate which files are compiled together. - That in order for the asset pipeline to work properly in production, you need to manually run
rake assets:precompile
to produce the compiled, minified assets in thepublic
directory.
These ideas are the minimum "need-to-know" pieces of information about the asset pipeline. If you don't already understand these ideas, you don't have an "expert or enthusiast" level of knowledge about the pipeline, and unfortunately, SO isn't the right place to learn this stuff. Fortunately, the the Rails Guide to the Asset Pipeline is a short 15-minute read and can get you up to speed quickly if you need it.
Second, these are the changes you need to make in order to ensure that the asset pipeline correctly sees and handles your new print.css
file.
Follow these steps:
- Add your
print.css
file toapp/assets/css
. - You'll need to create a manifest file that will show Rails where to find
print.css
. You need to do this, even though you only have a single CSS file you're adding. This is an easy step:- Add a file called
print.js
toapp/assets/javascript
. - Add this line to
print.js
:
- Add a file called
//= require print
This will be the only line in the entire print.js
file. If I understand correctly, Rails expects manifest files to have the file extension .js
, which is why we aren't using print.css
as the manifest file.
- We now need to instruct Rails to find and use the
print.js
manifest. Add the following line in yourconfig/application.rb
file:
config.assets.precompile += %w( print.js )
- We're almost finished! However, the already-present
application.js
manifest includes the line//= require_tree .
which means that it will include yourprint.css
file. This will cause yourprint.css
styling to affect your entire site, not just the single view. There are two ways of dealing with this:- If
application.js
andprint.js
do not share any assets, you can use thestub
command in yourapplication.js
to exclude the assets used inprint.js
. What this does is instructapplication.js
to remove any of the assets thatprint.js
references from its own list of referenced files. Our modifiedapplication.js
looks like:
- If
(snip...)
require_tree .
stub print
See this answer for more information.
- If your
print.js
andapplication.js
files share some assets, you'll need to move all of the assets used byapplication.js
into subdirectories. I didn't do this myself, so I'm not the most help in this area. Look at this answer for instructions.
Now we have included print.css
in the asset pipeline. We now need to direct Rails to use print.css
in your specific view.
Let's say your action is in the reports
controller, and that the action is named print_reports
. This means we have a reports_controller.rb
file and a print_reports.html.erb
(or .haml
) file. We need to make several changes to these files.
- To start, add a new layout in
app/views/layouts
. Perhaps call itprint.html.erb
. We'll use this new layout for yourprint_reports.html.erb
file. Set it up as you desire. For a page intended to be printed, this will likely be very simple, such as
<html>
<head>
<title="Print">
</head>
<body>
<%= yield %>
</body>
</html>
Using a separate layout the disadvantage that it's difficult to keep this layout and the layout used by the rest of the application in sync, but if you are using separate CSS files for the action, it's unlikely that you want the layout to be the same anyway.
- Add a
stylesheet_link_tag
in the layout's header pointing to yourprint.css
:
<html>
<head>
<title="Print"/>
<%= stylesheet_link_tag "print" %>
</head>
<body>
<%= yield %>
</body>
</html>
- In the controller, we'll tell Rails to use our new layout for the action. Add the line
layout 'print', only: [:print_reports]
to your controller:
class reports_controller < ApplicationController
layout 'print', only: [:print_reports]
#snip
See this question for more information and a few different approaches.
At this point, when you run the app, your print_reports
action should be using print.css
correctly!
Remember to run rake assets:precompile
before deploying on the server.
How do you properly include a conditional css file for IE in Rails 3.1+ (asset pipeline) and haml?
/[if IE]
= stylesheet_link_tag 'ie'
CSS Require Order - Asset Pipeline
Scss variables are processed at compile time, the order you use them doesn't actually matter for variables since, by the time the code links to the .css file, the variables were already replaces by the scss compiler on the assets pipeline, feeds.css.scss doesn't know what $red means since it's defined in another file.
You have to include the variables on every .scss file that uses them.
_colors.css.scss
$red: #ff0000;
$blue: #0000ff;
$gree: #00ff00;
default_app.css.scss
@import('colors');
.something {
color: $red;
}
feeds.css.scss
@import('colors');
.other_thing {
color: $red;
background: $blue;
}
Related Topics
Ruby-Rails Serve Ftp File Direct to Client
How to Find Current Abstract Route in Rails Middware
Sinatra Does Not Start with Twitter Gem
"No Routes Matches" When Using Current_Page in Rails 3
Aws Cognito User Authentication Missing Required Parameter Srp_A
Changing Songs on Jplayer by Clicking a Link, Hosted on Amazon S3
Generate All "Unique" Subsets of a Set (Not a Powerset)
Cannot Load Such File -- MySQL2/2.4/Mysql2 (Loaderror) - Windows
How to Use Private Submit to Hide from Profile
Can't Convert String into Integer in Ruby/Ruby-On-Rails
Failed to Build Gem Native Extension - Extconf.Rb Not Found
Ignoring a Character Along with Word Boundary in Regex
Ruby Attr_Accessor VS. Getter/Setter Benchmark: Why Is Accessor Faster
Rails 4 Session.Id Occasionally Nil