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
Related
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"
I'm working with a Rails 3 app, bootstrap-sass, and the asset pipeline, and I'm looking for some ideas on how to debug asset pipelines woes.
When working in development, and compiling on the fly (i.e. including from lots of compiled css files), my app looks exactly how I expect it to.
However when I use the asset pipeline to to compile assets into a single file, to test how it will behave in production, I think validation errors in the concatenated file application.css are causing browsers to stop evaluating the css correctly, and I'm seeing a number of display issues.
When I look at the generated css files in development, and pass them through a css3 validator, I can see that validation errors occur when working with the vendored css files (in most cases these are due to vendor specific hacks, setting off the validator) - the files I've generated are passing validation when I run them through the w3c validator, and I've listed the pass/fail results in the sprockets files below:
/*
* sprocket file in application.css
*
*= require_self
*= require vendor
*= require bootstrap-include # FAILS 474 ERRORS - presumably down to css hacks
*= require DT_bootstrap # FAILS TWO ERRORS - presumably down to css hacks again
*= require navbar # PASSES
*= require footer # PASSES
*= require main # PASSES
*= require home # PASSES
*= require widget # PASSES
*= require search # PASSES
*= require devise # PASSES
*= require doohickeys # PASSES
*= require datepicker # FAILS - again yet more cross browser css hacks suspected
*/
How should you start prepping files for production when concatenation breaks an app's visuals like this?
I'm asking on here to get an idea of how best to debug a compiled stylesheet like this - it sounds like something that has been solved before elegantly, but I'm not aware of a reliable, approach when dealing with a problem like this.
For example, I can see that some rules are not being evaluated by using web developer inspector tools in Firefox and Webkit, but it's not clear to me how to go beyond that, short of doing some laborious binary search on the compiled CSS.
Surely there are some more specialised tools available for situations like this already, like being able to compile only some files in application.css, and link to a precompiled bootstrap-sass file separately, or something similar?
You should not use Sprocket directives if you are using something like bootstrap-sass, you should use #import.
Rename your manifest file from application.css to application.css.scss, then #import away, example:
#import "frameworks";
#import "bootstrap-responsive";
My application works locally, but the stylesheets are not working on Heroku. I'm having difficulty understanding why.
I'm using Heroku's Cedar stack.
One of my ideas, is that my assets are not precompiling successfully:
RAILS_ENV=production bundle exec rake assets:precompile
rake aborted!
Invalid CSS after "*/": expected "}", was ""
(in /path/to/app/assets/stylesheets/application.css)
Can anyone explain why precompile is complaining about the */ on the very last line of application.css? It's meant to be there. If anyone has a fix, that would be ideal as well.
application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* 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 reset
*= require style
*= require projects
*= require_self
*/
Update
I attempted to add quotes in my application.css, and it doesn't make a difference. Something isn't setting right I guess. But I'm unable to precompile to send to heroku. When I load the site, there is rarely any formatting at all.
First up, how come you're using Rails 3.1rc5? - that came out almost 6 months ago, can you not up it to 3.1.3 which is the latest release? You could be fighting bugs (and certainly Rails security fixes) which have since been fixed and certainly using updated dependent gems.
Your syntax is exactly right for the manifest files (see http://guides.rubyonrails.org/asset_pipeline.html) - The problem may also lie in the files you are requiring, so the error may be being misreported. You could try a process of elimination by removing some or the require statements trying a precompile and seeing if it's successful or not, then readding them to find the troublesome file?
I'm pretty sure you need to quote your files:
*= require 'reset'
*= require 'style'
*= require 'projects'
*= require_self
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.
I'm new to the Asset Pipeline, having just migrated over from Rails 3.0. I'm trying to get CKEditor into the pipeline, but all the gems for it are really unclear about how they work, and have little or no usage instructions.
I would prefer to do this without using a gem, since it seems that all I have to do is drop the source files into the vendor/assets directory and then include them in application.js. I've tried that, however, when I precompile and push to production, it seems that some of the files aren't being found (editor.css, for example), and the editor doesn't show up at all (just blank area).
application.js
//= require jquery
//= require jquery_ujs
//= require ckeditor/ckeditor
//= require_self
That's with the source files in vendor/assets/javascript/ckeditor/, and is pointing to ckeditor.js. I'm just not sure where to go from here. This code works fine in development but does not work in production. I am running rake assets:precompile before adding and committing to git, and then pushing to heroku.
I got this working (deployed on Heroku), by:
Including the ckeditor code in vendor/assets/javascripts/ckeditor
Adding config.assets.precompile += ['ckeditor/*'] to my production.rb
Setup your ckeditor base path in the application.html.erb var CKEDITOR_BASEPATH = '/assets/ckeditor/'; before the include of the application.js
In application.js, include //= require ckeditor/ckeditor
Bite the bullet and use a gem. Two options here:
CKEditor Engine
https://github.com/galetahub/ckeditor.
This runs as an engine and includes its own mountable CKEditor in assets. It also exposes Ckeditor.assets which you can add to your assets path. This references all the images, plugins, language files and miscellaneous little bits of junk that CKEditor requires.
It has a shot at handling image uploads and it also integrates nicely with ActiveAdmin.
CKEditor Rails
https://github.com/tsechingho/ckeditor-rails
This does less, you include it in your asset pipeline and it does the rest for you. Nice and simple and sufficient for all basic use cases.
Upshot
I have used both of these on live projects and both do the job. Use the former if you plan on using ActiveAdmin and you want a smooth ride. Use the latter if you prefer minimal.
CKEditor is pretty ugly. Keep it at arms length, then when you need to upgrade you can swap it out for another.
If you are on Rails 3.1.0, you should upgrade to 3.1.1. In this version the precompile rake task compiles assets into both original and digested filenames. This is so third-party code that is not pipeline aware will still work.
You will need to add the ckeditor directory and all its child directories to the precompile array so that the precompile task knows to compile them.
config.assets.precompile += your_files
your_files can be an array of files, regexs or Procs - whatever is need to capture the names of the ckeditor files. I don't have ckeditor handy to work out what needs to go in precompile, so others might appreciate it if you post what you come up with!
One thing to watch is that if you have far-future headers set for the /assets directory on your webserver, you'll need to exclude the CKeditor directory. Because those files won't be fingerprinted, there may be issues when you update CKeditor with some clients not getting the updated code because they have a cached copy that marked to only expire some time in the future.
Have similar issue. For me it was fixed by overriding default precompile task (I used Rails 4 and CkEditor 4).
Add to application.rb config.assets.precompile += ['ckeditor/*']
In application.js //= require ckeditor/init
Create file lib/tasks/precompile_hook and paste text from this answer Precompile hook
Had the same issue, I've adjusted fallback in production for the assets which had not digest until it will be fixed:
config/environments/production.rb
config.assets.compile = true
what about ckeditor_assets directory in /public ? uploaded photos and attachments go to those directories, as defined by default in app/models/ckeditor/[attachment.rb,photo.rb]
ckeditor_assets is outside of assets and images/files are not accessible (url like http://yourdomain.com/ckeditor_assets/pictures/1/file.jpg will not work, but the file is there)
I spent some time getting the ckeditor_rails gem to work; maybe I can save some time for others trying to do the same.
The gem worked just fine out-of-the-box in development, but when deployed to production using precompiled assets under Phusion Passenger it did not. It was clear to me that the problem was that it was looking for assets under:
http://myhost.com/assets/ckeditor
where in fact it needed to be looking under:
http://myhost.com/my_app_name/assets/ckeditor
It was also clear to me that I needed somehow to set:
var CKEDITOR_BASEPATH = '/my_app_name/assets/ckeditor'
but no matter where or how I tried to do this, it wouldn't take.
Finally, I found on this key sentence on the gem wiki:
You can create app/assets/javascripts/ckeditor/basepath.js.erb to
have your own CKEDITOR_BASEPATH.
I created the file as specified (alongside my config.js file for configuring the editor), added my CKEDITOR_BASEPATH setting to the file, re-compiled my assets, and all was good.
In your config/development.rb make sure to set
config.assets.precompile += ['ckeditor/*']
as well as set
config.assets.debug = true