In my rails 3 application I have added the stylesheets in
/app/assets/stylesheets/ instead of /public/stylesheets
but the stylesheets files are not loaded when I specified the path as
<link href="/app/assets/stylesheets/home.css" rel="stylesheet" type="text/css">
Do I need to configure something to load this stylesheets
Please help.
Don't put the link like this to reference your stylesheets, rather use the stylesheet_link_tag (doc) ActionView method to get these in. The asset pipeline will actually end up having the URL be somewhat different from what you do.
At the top of your application.css should be following:
/* ...
*= require_self
*= require_tree .
*/
This will include all css files from /app/assets/stylesheets/.
In Rails 3.1, Rails uses the so-called asset pipeline to load assets for you, including CSS. So the idea isn't to just move stylesheets, etc. to another folder, but to put them there and have them assembled/compiled by the framework.
Specifically, to get your setup working, you'll need to use several gems required by the assets pipeline (Sprockets in particular).
If you're upgrading to Rails 3.1 from an earlier version, I found these 2 articles helpful: http://ridingrails.net/updating-rails-31/ http://railscasts.com/episodes/282-upgrading-to-rails-3-1?view=asciicast
If you've created a Rails 3.1 application from scratch, you shouldn't need to do anything: application.css already requires all the files in the app/assets/stylesheets directory with the = require_tree . command, and the application stylesheet should already be included in the layout.
Related
After a while looking for similar issues I couldn't find a solution. Most of them is for "only Ruby and Heroku" type of error.
But here I'm using AngularJS to import all my css and js files (including Bootstrap). The thing is, I cannot visualize my glyphicons on Heroku when locally works like a charm.
I tried in production.rb
config.assets.compile = true
Also to precompile my assets and pushing:
$ rake assets:precompile RAILS_ENV=production
Didn't work.
What else can I do?
My application.css
*= require bootstrap/dist/css/bootstrap
*= require_tree .
*= require_self
*= require angular-material/angular-material
*= require font-awesome/css/font-awesome
*= require bootstrap-social/bootstrap-social
*= require bootstrap-datepicker3
Thank you.
I had similar issue with icons in the past days. Could you post 2 images, one visualizing you Chrome/Mozilla Developer Console focusing on the css and html of that icon not visualized. This should be done for production and development. Basically my problem was in the asset pipeline.
1. The asset-url method did not work ...
2. The icons were based on a separate CSS Stylesheet. This CSS stylesheet was imported with #import from a stylesheet in the asset pipeline. Anyway you will notice the difference. Post the image, it may help.
What I am trying to say is, that you should focus on the difference between the fingerprinted application-fingerprint.css file from production and the one in development. It may be that you are not loading the css in development from the application.css, but from other file, then that file is not available in production.
Additionally I do not use require_tree
You can read my post at the following link and there are many post about the asset pipeline on stackoverflow, but is better to just interact and comment me so that i can try to help you.
Javascript does not work from a bootstrap template in rails
Rails 5 problems with multiple manifest files
I am using rails 3.2.12 and created a css file in assets/stylesheets/equipment.css to go along with a controller called equipment_controller.rb. This stylesheet isn't working. What do I need to do to get this included in the pipeline?
The file needs to be loaded into your application.css.
In your application.css file, you will either need to load the file manually (by adding require equipment to the manifest at the top of the file), or it will also be included if you have a require_tree line.
See http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives for more information.
Make sure you have the *= require_tree . in your application.css. It will be responsible to include all stylesheets from the current directory.
I cleared the contents and changed the extension from .css to .css.scss. And now it works.
If I try and include any .js and .css files downloaded from the jQuery Mobile website anywhere in the asset pipeline I get all kinds of view render problems, from not finding images to CSS not being applied, to errors in executing the jQuery js file. However, when I use the example code:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
in the header of my Rails 3.2.11 app it just works.
Why is this?
I tried inclusion into application.js and application.css in a number of ways.
Add jquery-rails and jquery-mobile to your Gemfile through their corresponding asset gems.
Require their assets from your application.js and application.css or the manifests you've got configured.
Do not include the script tag like that in your layout, otherwise you'd be bypassing the Rails Asset Pipeline.
Your Gemfile:
group :assets, :development do
gem 'jquery-rails'
gem 'jquery_mobile_rails'
end
Your asset manifests (application.js and application.css by default) should like like explained at: https://github.com/tscolari/jquery-mobile-rails#installation
Ok, so Mr. Vicente's solution is definitely the simplest, BUT it does not allow you to include custom CSS themes using the JQuery Mobile themeroller. What I have done is basically copy the raw CSS and put that into a 'Custom' css file, which in turn styles the provided themes as I want. Not ideal as you want to build custom themes yourself but OK.
I'm somewhat new to the Rails asset pipeline so I might be doing something wrong. I'm trying to use Active Admin for my backend and twitter bootstrap css for my front end application.
I added the bootstrap.css to /app/assets/stylesheets then also added:
//= require bootstrap
to application.css - then I did a precompile of the assets locally
It seems to work fine but some of the styling isn't coming through exactly and I think it's because active admin's css is overriding it.
My understanding is that the application compiles the css assets into the application css public asset and the application uses that file when running.
I need to somehow separate the two and make it use twitter bootstrap css as the main css on the front end and maybe tell it not to use active admin's css files on the front end.
What's the best way to do this?
I had the same problem, and was able to fix it by moving
app/assets/stylesheets/active_admin.css.scss
to
vendor/assets/stylesheets/active_admin.css.scss
The active admin assets should be in vendor/ as mentioned in the rails guide:
"Vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks."
Have you watched the RailsCasts video on using ActiveAdmin? In the video, Ryan shows you how to prevent the ActiveAdmin CSS from stepping on your main app CSS.
http://railscasts.com/episodes/284-active-admin
Moving info from Video into answer
In the application.css you remove:
*= require_tree .
For rails 4, Jiten K suggests adding this to production.rb:
config.assets.precompile += ['active_admin.css']
However one of the comments on that SO answer says this is not needed. I have not needed it so far.
For me changing application.css to following solves the problem:
*= require bootstrap
*= require_tree .
*= stub "active_admin"
Presumably my Javascript files are lost too...
I moved the stylesheets from public/ to app/assets/stylesheets (FYI did not find them in public/assets either).
Searching on the error confused me more...
Error is ActionController::RoutingError (No route matches [GET]
"/assets/application.css")
My routes for a pure Rails 3.1 app do not mention assets and yet it works fine.
Content of application.css
/*
* 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_tree .
*/
Not sure what else I should put here other than I was following these directions (probably not well): Upgrade Rails 3 to 3.1
In Rails 3.1 with the asset pipeline enabled, all assets (javascripts, css, and images) are accessible via the assets path in the browser and no longer via javascripts and stylesheets as before. This is because Rails manipulates your assets (compiles, bundles and minifies).
Be sure to watch the Railscasts episode on the Asset Pipeline.
This railscasts might also be very useful to you.
http://railscasts.com/episodes/282-upgrading-to-rails-3-1
http://ruby.railstutorial.org/chapters/rails-3-1#to
Here is another good resource for those that landed here looking for help migrating to 3.1. Michael Hartl goes through a step-by-step process upgrading an existing app to rails 3.1
This is where I found the answer when I had this exact issue a few weeks ago.