I am reading the "agile web development with rails" book and ran into a problem at the end of chapter 6. Basically, what I have done so far is defined a sass stylesheet (products.css.scss) and linked it to my application in layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body class='<%= controller.controller_name %>'>
<%= yield %>
</body>
</html>
but it doesn't load when i run the server and visit the page!
any idea why?
This solved my problem:
bundle exec rake assets:precompile
i just spent an hour figuring out the answer, since been having the exact same issue myself. go to your application.css.sass and make sure it has
/* ...
*= require_self
*= require_tree .
*/
in it. this auto loads all the other .css.sass in apps/assets/stylesheets, then precompiles them into public/assets/stylesheets to be 1 statis css file, and that is being served to your browser.
Have you include that products.css.scss in the application.css manifest file that you are referencing in the layout?
With the asset pipeline enabled, you must include the manifest in the layout and reference all the stylesheets from the manifest.
Hope it helps.
Running the assets precompile command will compile as the user above mentioned... however, that might not be what you want to do unless you want to have to run that everytime you make a change and then add all of this to your SCM repo and then possibly have issues in production.
The real solution to this exact example is that the doesn't have the "products" class in it, so the products.css.scss isn't picked up. See this post which helped me understand this: https://stackoverflow.com/a/10080134
place the depot.css from /public/stylesheets/ to app/assets/stylesheets/
according to the documentation (http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/StylesheetTagHelpers/stylesheet_link_tag) you can set the tag to include all stylesheets in the stylesheets directory with stylesheet_link_tag :all There are also options for caching, recursion, and concatenation.
If you don't want to include everything but just the application.css and your controller's css you could do this:
= stylesheet_link_tag 'application', params[:controller].classify.downcase.pluralize
Related
I am working on Ruby on Rails 6. My application has a controller that uses a different layout called "special":
class BoxController < ApplicationController
layout "special"
...
end
So I've created a new layouts/special.html.erb:
<!DOCTYPE html>
<html>
<head>
<title></title>
<%= stylesheet_link_tag "special" %>
<%= javascript_link_tag "special" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I then placed my 3rd party css and plugin under vendor->stylesheets and javascript folder:
stylesheets
-monnom.css
-mintymon.css
javascript
-monnom.js
-mintymon.js
I tried this but did not read my css and js.
What am I doing wrong? What am I missing in order for this work?
Can anyone guide me step by step? a super beginner here.
With Asset Pipeline:
Create a special.js file in the app/assets/javascripts folder.
Add JS files to special.js
//= require monnom
//= require mintymon
Create a special.css(.scss) file in the app/assets/stylesheets folder.
Add CSS files to special.css(.scss)
#import "monnom";
#import "mintymon";
If it doesn't work like this, add a custom path into config.assets.paths so the autoloader can find them
// assets.rb
config.assets.paths << Rails.root.join("vendor", "javascripts") // I think the folder name should be javascipts instead of javascript
config.assets.paths << Rails.root.join("vendor", "stylesheets")
Then restart rails server
You can see a list of load paths. Use Rails.application.config.assets.paths command in rails c.
As a bit of pre-text, I am used to Rails 2 but started building a sample app to get used to Rails 4 and I am having a nightmare with Sprockets and the asset pipeline even after reading the official guide and every question I can find on SO.
My css and js are included like so in my main view file:
<head>
...
<%= stylesheet_link_tag "application", media: "all" %>
<%= stylesheet_link_tag "style-responsive", media: "all" %>
<%= stylesheet_link_tag params[:controller], :media => "all" if stylesheet_exists?(params[:controller]) %>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<%= javascript_include_tag 'html5shiv' %>
<%= javascript_include_tag 'respond.min' %>
<![endif]-->
...
</head>
....
<%= javascript_include_tag "jquery-1.10.2.min" %>
<%= javascript_include_tag "jquery-ui-1.9.2.custom.min" %>
<%= javascript_include_tag "jquery-migrate-1.2.1.min" %>
<%= javascript_include_tag "bootstrap.min" %>
<%= javascript_include_tag "modernizr.min" %>
<%= javascript_include_tag params[:controller] if javascript_exists?(params[:controller]) %>
stylesheet_exists? and javascript_exists? are helper functions as I only want to include certain files when they are needed as opposed to the rest which are needed on every page.
The first error is:
Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( style-responsive.css )` to `config/initializers/assets.rb` and restart your server
If I then add that to assets.rb and restart, it moves on and the issue is repeated for every stylesheet_link_tag and javascript_include_tag in my view.
I could live with that even if it doesn't seem right but this comes crashing down when the interpreter gets to
<%= javascript_include_tag params[:controller] %>
Would I then need to also include every js file that I create for each controller? This seems wrong that I would have to constantly update the file whenever I create a new asset file.
In my application.css.erb I only have
*= require_self.
but I do have the old fashioned CSS #import for some stylesheets:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
#import url('bootstrap.min.css');
#import url('bootstrap-reset.css');
#import url('jquery-ui-1.10.3.css');
#import url('<%= asset_path 'css/font-awesome.min.css' %>');
#import url('custom-ico-fonts.css');
but all of these seem to work fine and don't need to be mentioned in assets.rb.
I have no requires set in application.js.
TLDR I think I am using Sprockets and the Asset Pipeline incorrectly, could someone please point out what it is I'm doing wrong and point me in the right direction?
I read about some similar issues to do with the sprocket-rails gem version 2.2.3 but I have 2.2.4 installed which is meant to have fixed any problems that existed in the previous version.
Rails 4.2.1
ruby 2.1.0p0 (2013-12-25 revision 44422) [x86_64-linux]
sprockets (3.0.1, 2.12.3)
sprockets-rails (2.2.4)
Sprockets wants to compact everything into a single file and minify it, so typically the pattern is to include all your javascript/stylesheets in the application manifests. There are plenty of good reasons for this pattern.
Since it appears you have removed the = require_tree . lines, this is not happening automatically and thus Rails wants to know about each individual file you plan to include separately via the assets.precompile configuration option. If requiring the entire directory is too aggressive, break your assets into subfolders and be more explicit about what you want to include.
Sprockets is relatively brittle and fighting against it is an uphill battle. So in both cases (JS/CSS), you should include it all and use selectors that are smart enough to scope page-specific styles or JS to that page.
That said, sometimes we cannot avoid having certain assets omitted from global inclusion. If you need to exclude a specific file from your manifest use a stub directive and include it separately with the HTML tag helpers.
Also note that you can have additional manifests (other files that include = require ... directives of their own) ... so long as you add those to the assets.precompile list.
The combination of stub and require directives and additional manifests should give you enough flexibility to organize your assets to your liking and make adding additional assets frictionless.
I have an app written in Rails 3.1 and I need completely to change the CSS styles in the project. I bought a template, deleted the current CSS styles from assets/stylesheets (including application.css) and pushed there the new CSS files.
Further I modified the stylesheet_link_tag with the names of new CSS files.
Then, when I open browser with the app, refresh the app - there are not loaded the new files. When I take a look at the generated source code, there are still the paths to the old CSS files.
I have read that probably would help me rake assets:precompile - but this is kind of impractical to every time, when I make a change in CSS files to run this command (which takes like 2 minutes I guess).
Is there any better way to handle it?
Thank you
*EDIT: * In the <head> tag:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "jquery-ui" %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "application" %>
Could it be just a browser cache? Try to force the reload (ctrl+f5).
Try to delete <your_app>/tmp/cache and restart the server.
Unless you decide to switch off the asset pipeline (which I don't recommend because it's actually pretty good), you're going to have to build yourself a new application.css. If you don't to that, your CSS files won't be recognized at all.
Just think of it as an inventory of every one of your CSS files. You can use this as a template.
/*
*= require cssfile1
*= require cssfile2
*/
And then, revert the stylesheet link tag to its original form in your layout. Inside your `application.html.erb', remove any reference to your CSS files and use this instead:
<%= stylesheet_link_tag "application", :media => "all" %>
Yup, importing new asset files into a rails application isn't a straightforward proposition.
Im very new to ruby, learning from some tutorials in a book i bought. I'm aware the books going to date quick and i think possibly already has.
I'm trying to get the follow code to load my stylesheets and my js to the page.
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
However this is not working, when i load my rails server and locally view my app from the tut, the css and js are both not loading. There is no reference to them in the head. Is this a date way to do it or perhaps something else is wrong? Any help would be appreciated, like i said im totally new and not a dev by trade so go easy on me.
Regards
V
Using rails 1.9.3-p0
First of all I advise you to look for information on asset pipeline for rails 3 ( you can start with Railscast)
To load your js files change
<%= javascript_include_tag :defaults %>
to
<%= javascript_include_tag "application" %>
and your application.js should be sth like
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
the last line loads your js files from assets folder
I've been following along Michael Hartl's excellent RoR Tutorial, but I'm using RoR 3.1. I am a newbie to RoR 3.1 and need help related to assets pipeline. Here is my problem:
Before continuing to section 5.3, I thought I'd like to push to Heroku and see how things develop. To my surprise "GET /" results in error 500. Everything went OK in my local-development-environment. I then tried running my local sample_app under production-environment (rails s -e production). Same result, error 500:
Sprockets::Helpers::RailsHelper::AssetPaths::AssetNotPrecompiledError in Pages#home
Showing /Users/john/Projects/sample_app/app/views/layouts/_stylesheets.html.erb where line #4 raised:
blueprint/screen.css isn't precompiled
Supporting info:
I put blueprint CSS directory under vendor/assets/stylesheets.
I followed Michael's section 13.1.4 advice and have the following as my app/views/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= render 'layouts/stylesheets' %>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="container">
<%= render 'layouts/header' %>
<section class="round">
<%= yield %>
</section>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
Content of app/views/layouts/_stylesheets.html.erb:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<%= stylesheet_link_tag 'blueprint/print', :media => 'print' %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
I have run bundle exec rake assets:precompile.
Content of public/assets/manifest.yml:
---
logo.png: logo-8e0a5ad292fbb13a2b07e68fa3995406.png
rails.png: rails-bd9ad5a560b5a3a7be0808c5cd76a798.png
blueprint/plugins/buttons/icons/cross.png: blueprint/plugins/buttons/icons/cross-2ebcd25368006d1b7b0c5b7d6b523ab3.png
blueprint/plugins/buttons/icons/key.png: blueprint/plugins/buttons/icons/key-55237526967cbcab3e8cfb12f0029d88.png
blueprint/plugins/buttons/icons/tick.png: blueprint/plugins/buttons/icons/tick-3f5fc1f52b505b93f88263e0432d25ce.png
blueprint/plugins/buttons/readme.txt: blueprint/plugins/buttons/readme-3ff7f5dbb0288d71f70682fdbe9d86ec.txt
blueprint/plugins/fancy-type/readme.txt: blueprint/plugins/fancy-type/readme-e7ed185d1a9f23256d418ab929b464d9.txt
blueprint/plugins/link-icons/icons/doc.png: blueprint/plugins/link-icons/icons/doc-b071fd74b88ff38cda8360a53f493013.png
blueprint/plugins/link-icons/icons/email.png: blueprint/plugins/link-icons/icons/email-28104e72b3418737d4b9b329c12ec358.png
blueprint/plugins/link-icons/icons/external.png: blueprint/plugins/link-icons/icons/external-ee6d976ddb80125fafe1a33c6f8aed10.png
blueprint/plugins/link-icons/icons/feed.png: blueprint/plugins/link-icons/icons/feed-59bc8604661681639d25cb7015a32c38.png
blueprint/plugins/link-icons/icons/im.png: blueprint/plugins/link-icons/icons/im-afeeb6e0b652c1edb1441bf0fb428596.png
blueprint/plugins/link-icons/icons/lock.png: blueprint/plugins/link-icons/icons/lock-d73c4b3b57ce72cb6dbd8b265507ff75.png
blueprint/plugins/link-icons/icons/pdf.png: blueprint/plugins/link-icons/icons/pdf-c4c543e5103a8516839a7846b91e1ac4.png
blueprint/plugins/link-icons/icons/visited.png: blueprint/plugins/link-icons/icons/visited-fb2370448bc4ea5d079e963a8c0d900b.png
blueprint/plugins/link-icons/icons/xls.png: blueprint/plugins/link-icons/icons/xls-5399729cd31dffc492a04b3805cd0be1.png
blueprint/plugins/link-icons/readme.txt: blueprint/plugins/link-icons/readme-42c02030199cd36a671d4b623cb4dc36.txt
blueprint/plugins/rtl/readme.txt: blueprint/plugins/rtl/readme-8d11bf76e19fb3fc7dbc6c2ddb54b92d.txt
blueprint/src/grid.png: blueprint/src/grid-973add038ed86febca85f03e8b35b94a.png
jquery-ui.min.js: jquery-ui-7e33882a28fc84ad0e0e47e46cbf901c.min.js
jquery.min.js: jquery-8a50feed8d29566738ad005e19fe1c2d.min.js
application.js: application-a552e1db33b8be6a42eedf1261916f3c.js
application.css: application-214e0c0742f20b334e8a7776e0a4c71d.css
I don't see blueprint/screen.css in manifest.yml.
What am I missing?
From http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets
If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the precompile array
This means that in your config/environments/production.rb, you set
config.assets.precompile += %w( blueprint/screen.css blueprint/print.css )
or a catchall:
config.assets.precompile += %w( *.css *.js )
I added a reference to the blueprint stylesheets in my application.css file. This way, I do not have to change the layout to modify the stylesheets, I simply need to modify the application.css file, run rake assets:precompile, and restart the webserver (if webrick or similar).
My application.css currently looks like this:
/*
* 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 ./blueprint
*= require_tree .
*/
You may want to precompile your assets on production as described above.
And if you use capistrano you may do it after code update:
require 'bundler/capistrano'
after 'deploy:update_code' do
run "cd #{release_path}; RAILS_ENV=#{rails_env} bundle exec rake assets:precompile"
end
From my own experience with this problem, where I was also going through the excellent RoR tutorial by Michael Hartl, there was one step that I think might be left out at this point...
bundle exec rake assets:precompile
git add public/assets
git commit -m "vendor compiled assets"
git push heroku
I found this here.