I'm using Rails 3.0. How I can include a CSS that I put in /public/stylesheets into a View file in /app/views/posts?
Asset pipeline was introduced in Rails 3.1.
In the previous versions (including Rails 3.0.0), you can link to CSS files with stylesheet_link_tag.
<%= stylesheet_link_tag "main" %>
Including the above code in the view file includes public/stylesheets/main.css file.
More details at http://guides.rubyonrails.org/v3.0.0/layouts_and_rendering.html#linking-to-css-files-with-stylesheet_link_tag
You should put it in /public/assets/ (it's the convention) and then you can do this:
<%= stylesheet_link_tag "example" %>
Or you can put it inside public/assets/stylesheets/ and do:
<%= stylesheet_link_tag "stylesheets/example" %>
Related
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.
I'm attempting to port from Rails 2.3.8 to Rails 3.2.6. My app currently uses 3rd party css/js/images which are placed in public/<3rdparty>/<subdir>/../..
In layout/application.html.erb, I used absolute path to retrieve them; eg <%= stylesheet_link_tag "/dojoroot/dojo/resources/dojo.css" %> and <%= javascript_include_tag "/dojoroot/dojo/dojo.js" %>
For Rails 3.2.6, the assets are expected to be in app/assets or lib/assets. However, moving the 3rd party from public to app/assets doesn't work because the tag are looking for the assets under their respective type. For example, <%= stylesheet_link_tag "dojoroot/dojo/resources/dojo.css" %> will look at app/assets/stylesheet/dojoroot/dojo/resources/dojo.csc and likewise the javascripts will look under apps/assets/javascripts/dojoroot/dojo/dojo.js. Breaking the 3rd party into 3 subdirs of stylesheets/javascripts/images seem rather wasteful and timeconsuming.
If I pass the absolute path to the tag; eg <%= javascript_include_tag "/dojoroot/dojo/dojo.js" %> Rails won't find it in app/assets/dojoroot.
Is there a configuration where I can have Rails look for the assets without injecting "stylesheets", "javascripts" into the path?
Just name the file, no path
<%= stylesheet_link_tag "dojo" %>
If you want to reference more than one, you can do
<%= stylesheet_link_tag "dojo", "custom" %>
Also, make sure in app/assets/javascript/application.js that you have
//= require jquery
//= require jquery_ujs
//= require_tree .
And <%= javascript_include_tag(:application) %> in your application.html.erb
read '2.1.2 Using index files' in http://edgeguides.rubyonrails.org/asset_pipeline.html
I'm using the asset pipeline in Rails 3.2.1
My app can having different CSS themes depending on users preferences. but 90% of the stylesheet is the same.
I'd like to have all my CSS compiled in a single file, but with the resulting filename depending on the user's name.
In Rails 2.x I could do this :
<%= stylesheet_link_tag 'main.css', "themes/#{#user.css_theme}.css", :cache => #user.name %>
and the file would have the correct file name.
Now, with Rails 3.1+ I can use ERB to customize the required stylesheets, but if I set this in my layout :
<%= stylesheet_link_tag "application" %>
the compiled file is named application.css and I can't find a way to set a custom name.
You just need define 2 lines in your head :
<%= stylesheet_link_tag "application" %>
<%= stylesheet_link_tag "themes/#{#user.css_theme}.css" %>
And in your application.css you have only the common part.
I'm using Rails 3.1 RC. I wanted to load a CSS manually and not via the asset pipeline.
I've tried it like this and with a hand coded tag:
<%= stylesheet_link_tag "application" %>
<%= stylesheet_link_tag "/stylesheets/global" %>
For some reason FireBug shows me multiple get requests for the global.css file:
Rails bug? Me being stupid?
If anyone is wondering - I use CSSEdit a lot so couldnt work with the file inside the asset pipeline.
did you set the assets.enabled to false in config/application.rb?
# Enable the asset pipeline
config.assets.enabled = false
I would guess this is caused by the same problem as described in Rails 3.1 with Asset Pipeline, link_to :confirm message showing twice?.
You have precompiled assets in your development environment and <%= stylesheet_link_tag "application" %> will expand into multiple tags including each CSS file, one of them being global.css.