I have in my application.css this:
*= require_self
*= require styles
*= require custom
*= require paggination
*= require colorbox
*= require registration
*= require ../vendor/dark
On development everything is OK but when I move to production, also some other assets must be precompiled because site looks different in production.
Does Rails precompile also other css files from assets folder, not only this required? I have many other css in assets folder.
Rails by default only precompiles application.css
If you need to add individual css files, maybe if you need specific styles on certain pages you need to add them like this.
# in config/production.rb
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
config.assets.precompile += %w(frontpage.css login.css)
Note: You list only the css ending even though it's a scss file you have.
Then you can reference your stylesheets in your view files.
<%= stylesheet_link_tag "frontpage" %>
Edit: And of course don't forget to do
bundle exec rake assets:precompile RAILS_ENV=production
Related
I've found several different threads on including assets in the vendor/assets directory but did not find anything that worked for me. Previously, I had all of my vendor assets in the app/ directory but moved the JavaScript to the vendor/assets/javascripts/ directory and the CSS to the vendor/assets/stylesheets/ directory.
I'm now trying to load my vendor assets both in development and production, and they're not loading at all. Here's my assets.rb file:
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += [
Rails.root.join('vendor/assets/javascripts/*').to_s,
Rails.root.join('vendor/assets/stylesheets/*').to_s
]
I've also tried adding the vendor/assets/ directories to Rails.application.config.assets.paths, and that didn't help.
How can I include all of the vendor assets in the asset pipeline?
UPDATE
I got my vendor JavaScript to load by adding the following to app/assets/javascripts/application.js:
//= require_tree ../../../vendor/assets/javascripts/.
However, I'm using Sass and am still not able to get the SCSS files to load.
I finally figured it out after remembering that the Rails asset load paths and Sprockets are different systems. Here's what I did:
In config/initializes/assets.rb, I added the following lines:
# Add additional assets to the asset load path
Rails.application.config.assets.paths += [
Rails.root.join('vendor', 'assets').to_s
]
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += [
Rails.root.join('vendor/assets/javascripts/*').to_s,
Rails.root.join('vendor/assets/stylesheets/*').to_s
]
The first block adds vendor assets to the Rails asset path. This allows me to use vendor assets in view helpers (ex: image_tag). The second block allows my vendor JavaScript and CSS to be precompiled with the rest of my assets.
Then, I added the following line to app/assets/javascripts/application.js above //= require_tree .:
//= require_tree ../../../vendor/assets/javascripts/.
This will automatically add to my application all of the JavaScript files I put into vendor/assets/javascripts.
For the Sass, I added the following to app/assets/stylesheets/application.sass:
#import "../../../vendor/assets/stylesheets/*";
I added this line before #import "*"; so that my own application's styles will take preference. This will include all of the vendor Sass files in with my application. Then I renamed all of my vendor .css files to use the .scss extension.
Now that development is working fine, I was worried about precompilation. I ran rails assets:precompile locally, and sure enough, all of my vendor assets were included!
I'm using
apache 2.2.15
passenger 5.1.2
rails 4.2.6
ruby 2.3.3
In the rails log, I get
(No route matches [GET] application-xxxxx.js
as well as
(No route matches [GET] application-xxxxx.css
I can find the assets in the public/assets directory.
My manifests:
app/assets/stylesheets/application.css.less:
/*
*= require jquery-ui
*= require font-awesome
*= require bootstrap_and_overrides
*= require awesome-bootstrap-checkbox
*= require lists
*= require mailgroups
*= require general
*= require colors
*= require print
*= require loader
*= require tooltips
*= require_self
*= require_tree .
*/
app/assets/javascripts/application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require twitter/bootstrap
//= require bootstrap
//= require turbolinks
//= require twitter/bootstrap/rails/confirm
//= require_self
//= require_tree .
and I set (following other answers here on SO) in config/production.rb
config.serve_static_files = true
in app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
<%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
I'm lost, thanks for your help.
UPDATE: I don't use Capistrano, just deploying manually.
When running Rails.application.config.assets.paths in the rails console, I get the following:
=> ["/var/www/myappname/app/assets/fonts",
"/var/www/myappname/app/assets/images",
"/var/www/myappname/app/assets/javascripts",
"/var/www/myappname/app/assets/stylesheets",
"/var/www/myappname/vendor/assets/fonts",
"/var/www/myappname/vendor/assets/images",
"/var/www/myappname/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-confirm-1.0.6/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/local_time-1.0.3/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/font-awesome-rails-4.7.0.1/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/font-awesome-rails-4.7.0.1/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-fontawesome-0.5.1/vendor/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-fontawesome-0.5.1/vendor/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/images",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/vendor/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-turbolinks-2.1.0/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/images",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-rails-4.2.2/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/coffee-rails-4.0.1/lib/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts",
#<Pathname:/var/www/myappname/app/assets/fonts>,
#<Pathname:/var/www/myappname/app/views>,
#<Pathname:/var/www/myappname/app/assets/stylesheets>,
#<Pathname:/var/www/myappname/app/assets/javascripts>]
my config/initializers/assets.rb already contains this:
Rails.application.config.assets.precompile += ['.svg', '*.eot', '*.woff', '*.woff2', '*.ttf', '*.otf', '*.js', '*.css']
this is my advise.
I add the following resources that may help in finding a solution.
https://launchschool.com/blog/rails-asset-pipeline-best-practices
https://railsapps.github.io/rails-javascript-include-external.html
https://reinteractive.com/posts/116-12-tips-for-the-rails-asset-pipeline
I read all the guides that can be found by searching rails asset pipeline, but I will not link them all
My advice is to check the fingerprint of the application.css and application.js both with the Chrome Developer Tools (by going in any screen element, opening the developer toolbox with f12 and checking any style of any div or any js file). You will need to check which fingerprint version of the file is used, then open that version with the text editor and check what is loaded in the fingerprint version of the file.
If your file (for ex. user.js) is loaded at the bottom of the manifest, you should easily find it at the bottom of your fingerprinted application.js.
If you want to update this file you can run
rake assets:precompile
This will precompile assets only in development, for production you need to specify the environment. It will change that fingerprinted file application.css and application.js with the editing you have done.
RAILS_ENV=production bundle exec rake assets:precompile
You can also check the file at the following address localhost:3000/assets/yourjsfile.js or check the fingerprint version by following localhost:3000/assets/application-yourfingerprint.js
As you can see, many files are included in that public/assets folder, you can delete them with rake assets:clean or -rf public/assets and then run rake assets:precompile, it will precompile again assets.
If nothing is included, then your application.js is not being loaded. You may try the following as I read on different posts:
Include the file in the config/initializers/assets.rb with the following line of code:
Rails.application.config.assets.precompile += %w( user.js )
Start the rails c and run Rails.application.config.assets.paths
This command will show in red the paths that are automatically included, for example those inside App, Lib and Vendor, in green those that you included by adding inside config/application.rb the follwing code to add new path
config.assets.paths << Rails.root.join("vendor","assets", "fonts")
Another error i made in the past was not using the correct sprockets syntax, you can check it at the following link ( i was using require_user instead of require user):
https://github.com/rails/sprockets#sprockets-directives
Another problem was that I had under App/assets/javascript two files named user (user.coffee and user.js). The first to be loaded was user.coffee which was empty.
In both assets/stylesheets and assets/javascripts, I have a folder called admin, which has a handful of appropriate Coffeescript and SASS files.
$ cat app/assets/javascripts/admin.js
//= require jquery
//= require jquery_ujs
//= require_tree ./admin
$ cat app/assets/stylesheets/admin.css
/*
*= require_self
*= require_tree ./admin
*/
$ cat config/application.rb | grep 'assets.paths'
config.assets.paths << "#{Rails.root}/app/assets/stylesheets/admin"
config.assets.paths << "#{Rails.root}/app/assets/javascripts/admin"
After precompiling, the admin folders (and their contents) are nowhere to be seen in public/assets.
I'm probably making a fundamental mistake here; I've done very little playing with the pipeline besides the basics of images, application.js etc.
Can anyone point out what I'm doing wrong?
From what i can see, they are manifests. By default only application.css and application.js are precompiled. Other need need to be added.
You need to add them to the production.rb environment as follows (comment is from the file itself):
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w( admin.css admin.js )
Also, you can ditch the config.assets.paths in your application.rb, because those paths are loaded by default.
To precompile all css files in a project I could add this to production.rb:
config.assets.precompile << '*.css'
But how can I add only css files in a particular folder?
Add all stylesheets into your app/assets/stylesheets/application.css:
/*
*= require_self
*= require_tree dir_one
*= require_tree dir_two
*/
Then they will be precompiled. I think this is the preferred way over using config.assets.precompile.
If you really want to use it, this SO question should help: How do I use config.assets.precompile for directories rather than single files?
This was asked in another question, but none of the solutions appear to work for me in 3.1rc1.
I'm trying to use the new assets stuff in rails 3.1 - I have the files:
./vendor/assets/stylesheets/jquery-ui-1.8.13.custom.css
./vendor/assets/javascripts/jquery-ui-1.8.13.custom.min.js
I then added:
//= require jquery-ui to app/assets/javascripts/application.js
*= require jquery-ui to app/assets/stylesheets/application.css
The jquery-ui javascript file loads just fine, but the css file says:
Sprockets::FileNotFound (couldn't find file 'jquery-ui'
(in /home/xanview2/xancar/app/assets/stylesheets/application.css):6):
Any ideas?
Example of a working setup:
$ cat app/assets/javascripts/application.js
//= require jquery
//= require jquery-ui
$ cat app/assets/stylesheets/application.css
/*
*= require vendor
*
*/
$ cat vendor/assets/stylesheets/vendor.css
/*
*= require_tree ./jquery_ui
*
*/
vendor/assets/ $ tree
stylesheets
vendor.css
jquery_ui
jquery-ui-1.8.13.custom.css
...
images
jquery_ui
ui-bg_flat_0_aaaaaa_40x100.png
...
Finally run this command:
vendor/assets/images $ ln -s jquery_ui/ images
Enjoy your jQuery UI
This is a great article to read about Rails 3.1's asset pipeline and jQuery UI: JQuery-UI css and images, and Rails Asset Pipeline
You might have more luck with the jquery-ui-rails gem (see announcement), which packages the jQuery UI JavaScripts, stylesheets and images as assets for you.
This topic comes up a lot, and now that a significant amount of time has passed, things may be different.
In Rails 3.1.2, I found something that works without symbolic links.
Follow the steps above, but put the images for the theme right next to the jquery-ui-xxx.css file in an images/ folder. This saved me quite a few headaches.
Yes, this would mean the images would reside in a stylesheets/ folder in vendor/assets, but it works and it is quick to do.
Have you tried using the rails-asset-jqueryui gem? It vendors jquery-ui and the standard themes (currently v1.8.16) and makes them available via the asset pipeline. The following example calls for the Smoothness theme.
Gemfile:
....
gem 'rails-asset-jqueryui'
...
app/assets/javascripts/application.js:
...
//= require jqueryui
...
app/assets/stylesheets/application.css:
...
= require smoothness
...
If you're using the jquery-ui-rails gem:
application.css
/*
*= require jquery.ui.all
*/
application.js
//= require jquery.ui.all
It seems to me that a lot of confusion can be avoided by keeping these library assets out of assets/javascripts and assets/stylesheets dirs, where sprockets et al have some opinions about what should happen.
Say you've downloaded a customized jquery-ui zipfile from the themeroller. Try this:
unpack the zip file into an subdir of an assets dir, something like
vendor/assets/jquery-ui-1.8.23.custom
in application.rb add:
config.assets.paths << Rails.root.join('vendor', 'assets', 'jquery-ui-1.8.23.custom').to_s
add manifest files in the usual places:
vendor/assets/javascripts/jquery-ui.js:
//= require_tree ../jquery-ui-1.8.23.custom
vendor/assets/stylesheets/jquery-ui.css:
*= require_tree ../jquery-ui.1.8.23.custom
in config/environments/production.rb, add (referring to manifest filenames):
config.assets.precompile += %w(jquery-ui.js jquery-ui.css)
in views:
<%= stylesheet_link_tag 'jquery-ui' %>
<%= javascript_include_tag 'jquery-ui' %>
if you use this:
https://github.com/carlhoerberg/sprockets-urlrewriter
i believe you can just dump the whole shebang in a directory and require the css file... it will smoothly rewrite the relative urls.
you just have to install the gem and add a config line to application.rb