Im a newbie to Ruby and Rails and wanted to know how to add custom.css to be last css file call in DOM.
Also, if I need Js to be last and not above the header, what's the correct way of doing this.
Currently everything coming from the assets folder in Rails order.
Thanks...
You can add:
<%= stylesheet_link_tag "custom", :media => "all" %>
to the bottom of the layouts file and add custom.css to your precompile list:
# /config/environments/production.rb
config.assets.precompile += %w( custom.css )
But your application.css file will still compile with custom.css.
You can stop it compiling in application.css by setting which files are included in the application.css file. Change,
# /app/assets/stylesheets/application.css
/*
*= require_tree .
*/
to
/*
*= require first_css
*= require second_css
*/
which will ignore the custom.css file. It's very similar for the javascript. See http://guides.rubyonrails.org/asset_pipeline.html for more info.
In your layout.erb you can include everything you need under your layout itself
Related
Is there a way to add all files in Vendor third party libraries with sepearate application.css and application.js file?
Can I just add those two files under Vendor folder and require_tree from there like below?
/*
*= require_tree assets/stylesheets/.
*/
Some say that I should include in app/assets/stylsheets/application.css file but I think there is another way like above.
You can do that with a little bit tweak
Sprockets uses files named index (with the relevant extensions) for a special purpose.
For example, if you have a jQuery library with many modules, which is stored in lib/assets/library_name, the file lib/assets/library_name/index.js serves as the manifest for all files in this library. This file could include a list of all the required files in order, or a simple require_tree directive http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives (See 2.2.2)
That is said, say your vendor CSS directory is vendor/assets/css/foo, with the following files
/foo
bar.css
baz.css
Then you can create a file foo/index.css with following content
/= require_tree ./
Then you can include this lib in your main application.css as
/= require foo
Disclaimer
I have not used the above technique by myself. I just followed the guide and made assumption.
I myself recommend require CSS one by one as order matters in CSS. Even the files are in vendor, you can require them directly in application.css like
/= require foo/bar
/= require foo/baz
Try putting this in your javascript file (vendor.js):
//= require_tree ../../../vendor/assets/javascripts/.
and this in your css file (vendor.css):
//= require_tree ../../../vendor/assets/stylesheets/.
You could put these in app/assets/stylesheets/vendor.css or app/assets/javascripts/vendor.js, and then include them in your _head.html.erb partial:
<%= stylesheet_link_tag "vendor", :media => "screen, projection" %>
<%= javascript_include_tag "vendor" %>
Make sure to add these to your assets to be precompiled as well (config/environments/production.rb):
config.assets.precompile += ['vendor.css', 'vendor.js']
Also, cool username! :D
I want to include some stylesheets in my rails application via
but it doesn't work as expected. It creates the line
But I want to include all the file in app/assets/stylesheets, especially the twitter bootstrap files located there...
How do I do it? I literally don't have any clue and the post I found don't help me either... :(
This way of including the stylesheets is not recommended now. If you are using Rails >= 3.x, it is better to enable assets pipeline and add the line in your app/assets/stylesheets/application.css
*= require_tree
This will include all the stylesheets under app/assets/stylesheets/* even the styles under directories and then do this in your html file.
<%=stylesheet_link_tag "application" %>
Try *= require_tree . in application.css
I just did a major upgrade to Rails 3.2 and the newest Sass and Coffee Rails Gems, but my Application file won't render as Application.css.scss. I had it in my html as such:
<%= stylesheet_link_tag 'application.css.scss' %>
And when I look at the Page Source in my Development mode I'm getting
<link href="/assets/application.css.scss.css" media="screen" rel="stylesheet" type="text/css" />
What the heck is going on!?
It seems to append .css to everything I put inside the stylesheet_link_tag, so if i leave it as just 'application' in my page source I have application.css, etc.
The appropriate format for the tag is:
<%= stylesheet_link_tag 'application' %>
Rails automatically compiles the .scss file into a .css file -- then it automatically imports the correct file. It's all take care of for you.
If you don't append an extension to stylesheet_link_tag, .css will be appended automatically. I do not know why it's appending the extension when you are specifying .scss, however.
I'm also not sure why you don't just use <%= stylesheet_link_tag 'application' %>, which should be all that's necessary.
See the documentation for stylesheet_link_tag here for more info.
I think the "default" way to do this in Rails 3.2 using Sprockets is to have file called application.css (not application.css.scss) that contains your Sprockets manifest code. Which should look something like this...
application.css (app/assets/stylesheets)
/*
* 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 main_scss_file
*/
There should be at least two lines one should be the require_self which adds the content inside itself and the require some_other_file which is a reference to your main scss file.The default behavior of rake assets:precompile is to compile your application.js and application css
production.rb coded generated by Rail generators specifies that application.css is compiled by default. (config/environments)
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
# config.assets.precompile += %w( search.js )
config.assets.precompile += %w( home.js )
application.erb
<%= stylesheet_link_tag 'application' %>
I'm a little confused by when I need to add an asset to config.assets.precompile and when it's not necessary.
(It's possible that my problem may stem from the fact that this app was migrated from rails 2.x; at some point soon I'm going to rebuild it from the ground up as a 3.x app, but don't have the time for that yet.)
Here's my issue: I have a .css and .js files that are not being found by sprockets unless I add them to config.assets.precompile in application.rb. I can't imagine I have to do this for every .js and .css, do I?
For example, one file I'm having this issue with is app/assets/stylesheets/facybox.css.
application.css is:
/*
*= require_self
*= require_directory .
*/
(yes, require_directory instead of require_tree intentionally).
I run rake assets:precompile on my server during deploy. The resulting application.css has the contents of facybox.css in it.
facybox.css is referred to in a partial, like this:
<% content_for :header do %>
<%= stylesheet_link_tag "facybox" %>
<% end %>
But when I go to a page that includes the partial, I get:
Sprockets::Helpers::RailsHelper::AssetPaths::AssetNotPrecompiledError in Admin#compositions
Showing /srv/zmx/releases/5420c4dde6fbec53d78cffe78396085f263ed039/app/views/shared/_preview_assets.erb where line #6 raised:
facybox.css isn't precompiled
which I assume is because sprockets is looking for the fingerprinted copy of the file, which doesn't exist unless I add it to config.assets.precompile. Then all is hunky-dory.
Can someone explain?
The rules for precompiling are simple:
If an asset is required in one of the application manifests you do not need to add it to precompile.
If an asset needs to be referenced directly in a Rails view then you DO need to add it (and you should remove it from any manifests).
As you said yourself, the contents of facybox.css are already included in your application.css.
This means that you can just remove the stylesheet_link_tag from your partial and also any other places where you use facybox.css. You would have to do the same for all other stylesheets that you already have included in your application.css
I was wondering if there was a way to ignore a css file from being added to the manifest application.css file.
The reason why I want to do this is that I have two versions of the site, a mobile version, an an web version. The mobile version's css is currently being added to the manifest, and messing with the style of the main page.
Is there anyway to configure the manifest file to exclude a certain css file?
Remove the require_tree directive and add just the files you want, in the order you want them to application.css. Leave out the mobile CSS file.
To access the mobile CSS file you need to add it to the precompile list in
production.rb:
config.assets.precompile += ['mobile.css']
This will allow you to use the standard rails helper to access the mobile css:
<%= stylesheet_link_tag "mobile" %>
as distinct from the application.css file.
One tip for these situations is that you can share CSS files between manifests. For example, if you have a CSS reset in a separate file this can be added to both manifests (assuming you make the mobile css a manifest too).
What I ended up doing was creating subdirectories under app/assets/stylesheets called app/assets/stylesheets/web and app/assets/stylesheets/mobile
Then place an application.css with the standard:
/* ...
*= require_self
*= require_tree .
*/
inside each of your new web and mobile folders. Then to access them:
# just use this
<%= stylesheet_link_tag "web/application", :media => "all" %>
# or this as needed
<%= stylesheet_link_tag "mobile/application", :media => "all" %>