I was wondering if there was a way to ignore a css file from being added to the manifest application.css file.
The reason why I want to do this is that I have two versions of the site, a mobile version, an an web version. The mobile version's css is currently being added to the manifest, and messing with the style of the main page.
Is there anyway to configure the manifest file to exclude a certain css file?
Remove the require_tree directive and add just the files you want, in the order you want them to application.css. Leave out the mobile CSS file.
To access the mobile CSS file you need to add it to the precompile list in
production.rb:
config.assets.precompile += ['mobile.css']
This will allow you to use the standard rails helper to access the mobile css:
<%= stylesheet_link_tag "mobile" %>
as distinct from the application.css file.
One tip for these situations is that you can share CSS files between manifests. For example, if you have a CSS reset in a separate file this can be added to both manifests (assuming you make the mobile css a manifest too).
What I ended up doing was creating subdirectories under app/assets/stylesheets called app/assets/stylesheets/web and app/assets/stylesheets/mobile
Then place an application.css with the standard:
/* ...
*= require_self
*= require_tree .
*/
inside each of your new web and mobile folders. Then to access them:
# just use this
<%= stylesheet_link_tag "web/application", :media => "all" %>
# or this as needed
<%= stylesheet_link_tag "mobile/application", :media => "all" %>
Related
I would like to create a mobile version of my rails 5.0.0.1 application using jquery mobile.
As a starter I found useful instruction written in a web page by Scott W. Bradley and in a railscasts episode.
However when I insert the jquery mobile js file in app/assets/javascripts and the jquery mobile css file in app/assets/stylesheets my application gets broken: css rules are not respected, redirects fails, javascripts do not work, colours are blurred, buttons do not work.
So I thought to add the jquery mobile files in a dedicated folder /app/assets/jquerymobile and I edited /app/views_mobile/layouts/application.html.erb adding in the head the following lines of code:
<%= stylesheet_link_tag '/app/assets/jquerymobile/jquerymobile.css' %>
<%= javascript_include_tag '/app/assets/jquerymobile/jquerymobile.js' %>
However the files are not loaded, the mobile behaves as if the jquerymobile.css and jquerymobile.js files do not exist. My goal is to keep separated jquery mobile from the desktop version and load the files in case of request from mobile. However I would like to know what breaks the application, since the mobile version with the complete asset pipeline would inherit the problem.
To esclude css and js files from the asset pipeline it is necessary to add the following entries at the very end to application.css and application.js:
*= stub jquerymobile
//= stub jquerymobile
Then it is necessary to add the following lines of code in /config/initializers/assets.rb:
Rails.application.config.assets.precompile += %w( jquerymobile.css )
Rails.application.config.assets.precompile += %w( jquerymobile.js )
At this point it is possible to include the above css and js files using stylesheet_link_tag and javascript_include_tag in the head of the /app/views_mobile/layouts/application.html.erb file as follows:
<%= stylesheet_link_tag 'jquerymobile.css' %>
<%= javascript_include_tag 'jquerymobile.js' %>
See also this gist.
I have a clients.css and jobs.css in the assets/stylesheets location.
Each has a respective controller. Jobs was created with a scaffold after clients. The scaffolds.scss file is blank.
application.css is blank
When I code a change such as body{color:black} in the jobs.css, it changes the clients/index.html.erb view and the jobs/index.html.erb view.
What could be the reason for this? I would like to have separate .css files for jobs and clients..
From the documentation:
Sprockets concatenates all JavaScript files into one master .js file
and all CSS files into one master .css file.
What this means, of course, is that when you make a change to jobs.css, you'll see the same css being applied to every matching element throughout your application. All of those separate .css files are there to help you keep things organized from a human perspective, rather than from the perspective of your application.
You might want to just come up with different IDs and classes depending on your page (like #body_client and #body_job) to differentiate them, but you can see how this naming convention could get unwieldy as your app grows.
Having separate assets is possible, but not without some pain.
In application.js, remove:
//= require_tree
In application.css, remove:
*= require_tree
In application.html.erb, add the following:
<%= stylesheet_link_tag "application", params[:controller], :media => "all" %>
<%= javascript_include_tag "application", params[:controller] %>
Create a new initializer file at config/initializers/assets.rb and add the following code:
%w( clients_controller jobs_controller ).each do |controller|
Rails.application.config.assets.precompile += ["#{controller}.js.coffee", "#{controller}.css"]
end
That should get you set up with separate per page assets. Check the original blog post for more details.
So, I'm learning to build Rails app, I've written the controller and everything looks fine, then moved to get the views.
As usual I downloaded a template and started to move it into my app (normal html template from html5up.net).
All JS files I've put them in app/assets/javascripts.
All CSS files I've put them in the app/assets/stylesheets.
and in the app/views/layouts/application.html.erb I've included them all using the javascript_include_tag and stylesheet_link_tag
so everything in theory should be fine.
In my routes file I got those 2 lines:
resources :users
root 'users#new'
When I start the server and go to the root route localhost:3000 everything is rendered smoothly and with awesome style, however if I try to access the very same page but from it's original route localhost:3000/users/new somewhy the html I get doesn't include images and scripts, and the style is messed up (probably because no images/js), same goes for other pages from the users controller.
I tried putting the js/css files in public folder and linking to them but it gives exact same results.
Any idea what's going wrong and how to fix it?
I'm using Rails 4.2.1
Rather than including each of the stylesheets / javascripts directly, reference them within application.css and application.js respectively. This will add them to the asset pipeline - making the application run faster amongst other things (http://guides.rubyonrails.org/asset_pipeline.html).
So instead of referencing the scripts directly in application.html.erb, just ensure application.html.erb has these to lines in the head section:
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
Then check that application.css exists in app/assets/stylesheets and that it includes this line:
*= require_tree .
This tells it to include every .css file that is within the assets/stylesheets directory (alternatively reference each file individually with a require statement)
Similarly, ensure app/assests/javascripts/application.js includes:
//= require require_tree .
And that the javascript files are in app/assets/javascripts
Put all the images in app/assets/images
Change all the references to the images in CSS files from
url("images/example.png")
to
url(image_path("example.jpg"))
or
image-url("example.png")
And you should be good to go... the rails helpers should handle the relative path issues that it looks like you've been experiencing.
I know it's kinda old, but forgot to post the answer for this.
The problem was in the view html codes, the <%= stylesheet_link_tag "application", media: "all" %> was inside a <noscript> tags so they didn't work.
I am developing my first ruby on rails web application at the moment and I have a little bit of a problem. I would need two pages (a start page and a login page) which haven't the application.html.erb layout.
At the moment I gained that by adding:
layout false
To my login_controller.rb file. But now I am unable to use the twitter bootstrap components which i included in the /assets/stylesheet and /assets/javascripts folder.
Can someone show me a best practice method how to add pages without the layouts and design from the application.html.erb, but still can use the twitter bootstrap components?
You can create a different layout file including only the assets you need.
A typical scenario I usually face is the administration section of a web site where the layout changes from the public section.
In that case you can create a layout views/layouts/admin.htm.erb like this:
<!DOCTYPE html>
<html>
<head>
<title>Admin</title>
<%= stylesheet_link_tag "admin", :media => "all" %>
<%= javascript_include_tag "admin" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
As you can see there are two different manifest files for the js and css assets.
That means there are two files:
/assets/javascripts/admin.js
/assets/stylesheets/admin.css
Like in the application.js and application.css you can require bootstrap and other assets you may need for that specific layout.
Here an example:
/*
* 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 bootstrap
*= require_self
*/
The last thing
You need to tell rails to precompile the new manifest files you created.
In /config/environments/production.rb
# Precompile additional assets (application.js.erb, application.css, and all non-JS/CSS are already added)
# config.assets.precompile += %w( search.js )
config.assets.precompile += %w( admin.css admin.js )
NOW YOU CAN USE THE LAYOUT
In your controller:
layout "admin"
By default, (at least, using scaffolding), Rails adds links to all stylesheets in the /app/assets/stylesheets directory. I'd like to have multiple smaller stylesheets for organization, but only need to link to one that imports the rest in order to stay organized yet minimize HTTP requests.
Is there a way to disable this auto-inclusion, whether by configuring the asset pipeline or changing how they're included in the layout itself?
FWIW, I'm including the main stylesheet from application.html.haml using stylesheet_link_tag "application".
You can do this by modifying your application.css(.scss) file.
In that file there will be the following line:
require_tree .
Simply remove that and replace it with the includes you require.
application.css
require file1
require nested/folders/file2
Then you can have another file
main.css
require file2
require file3
And include them separately:
stylesheet_link_tag "application"
stylesheet_link_tag "main"
The stylesheet_link_tag can take an array too, if for some reason you want the css files to load in the same place, but with separate HTTP requests.
stylesheet_link_tag ["application", "main"]
The files with the requires are called manifest files.