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"
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
Is it possible to have different assets for different areas of a site in Rails. For example, in my admin area, I'm using bootstrap but this is getting loaded in non admin areas too. I guess it's to do with my folder structure but I've tried moving it and haven't really had any luck.
Anything admin related is where you'd expect a normal controller, view or asset except it's nested within an admin folder. E.g.
App > Assets > Stylesheets > Admin
You can customise the asset pipeline to whatever you require.
described in detail here:
http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
also here:
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
Note in your app/assets/javascripts/application.js this little line:
//= require_tree .
which instructs sprocket to load all files in your assets javascript folder tree. Change this this line to limit to specific files.
So I've started building a gem, which is difficult, but it seems to be working out so far..
Except for one little thing, the assets. I've tried putting them in my lib/assets, app/assets and vendor/assets. But they don't seem to load.
I have a test-app which loads my gem to test it, but nothing seems to work. I have an engine in my gem which I'm sure is being loaded.
What more do I need to know for this to start working?
EDIT:
here is my engine (located in lib/baco/engine.rb):
require 'rails'
module Baco
class Engine < Rails::Engine
end
end
EDIT 2:
This is my css file (located in vendor/assets/stylesheets/application.css.scss):
/*
* 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 baco
*/
input {
padding:10px;
}
Turns out I still need to require the the css from the app that is loading the gem..
Is this a normal situation? Because I haven't read about that anywhere..
Anyways, got it to work, thanks for looking into it, hope this topic can helps some others out..
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.
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.