Adding page-specific CSS to Rails Asset Pipeline

asset pipeline rails 4
rails asset pipeline bootstrap
rails 5.2 asset pipeline
rails display image from assets
rails add javascript to view
heroku assets:precompile rails 5
add webpacker to rails
rails sprockets railtie

This is a question that several people have asked before, but none of the questions were quite asked or answered in a way that I found helpful, so I'm writing the question and answer that I would have found helpful.

I have a Rails 3.1+ app using the asset pipeline. There's one specific action that I want to have use different CSS. (In my specific case, I have a page that is intended to be printed, so it truly needs completely different CSS and does not need any Javascript.) Currently, I have only one application-specific CSS file. How do I add the new CSS file and direct the asset pipeline to use my file?

For example, right now, my app/assets looks like


I want to add a print.css file that is used by the view of a specific action. This view will not use the application.css file. How do I add print.css?

Rails asset pipeline - Page specific css, When you generate a scaffold or a controller, Rails also generates a generates the file scaffolds.css (or scaffolds.scss if sass-rails is in the Gemfile .) will also add a new file at app/assets/stylesheets/projects.scss . will be precompiled when loading them on a per page basis. When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

All of you are putting very complicated answers.

1 Go to app/assets/stylesheets 2.Make a file with the extension .css 3.Go to config/initializers/assets.rb 4.Put this line of of code Rails.application.config.assets.precompile += %w( file.css ) 5.Replace file.css with the file you created 6.Go to your html.erb file 7.Type this in the <head>, <%= stylesheet_link_tag "file" %> 8.Replace file with the filename(no extension in the name) Good Job you linked the file!

The Asset Pipeline, Creating page-specific JavaScript and CSS in Rails written in css, front-end, The Rails Asset Pipeline is a really great tool that improves performance by and for me to add specific instructions to the production.rb file. If you’re building a Rails application, you’ve probably heard of the asset pipeline. The asset pipeline can be thought of as the tools and mechanisms by which Javascript files, stylesheets, and images are processed and prepared for use by the browser. These processes can minify and compress assets,

Official Solution

It is documented in the official Rails Guides here:

Actually you can leave out the require_tree directive (located in application.css and application.js) then use this in your template:

For controller specific JavaScript:

<%= javascript_include_tag params[:controller] %>

For controller specific CSS:

<%= stylesheet_link_tag params[:controller] %>

Creating page-specific JavaScript and CSS in Rails, The layout was added to the controller for any pages making use of the critical step of adding the new CSS file to the Rails asset pre-compilation. # config/​initializers/assets.rb Rails.application.config.assets.precompile  Rails comes equipped with Sass by default. When you build a new app, an application.css stylesheet is created for you. This isn't just a normal stylesheet -- rather, it stands as a master stylesheet in the Rails Asset Pipeline. If you don't know how the Asset Pipeline works, I suggest you read a little bit about it. In this file, you'll find

In your layout

  // ...
  <%= yield :stylesheets %>

In your view

<%= provide :stylesheets do %>
  // your page-specific css
<% end %>

Rails Controller-Specific CSS (& JS) - Andur Carr, The Rails Asset Pipeline has given us the opportunity to manage files other than Ruby files as first-class citizens. In your respective manifest files, you can add the following: // application.css.scss, assuming that SASS is used@import ". is useful, if only as a means to treat them differently from page-specific content. Use the Rails asset pipeline, even for JavaScript used on just one page (page-specific JavaScript). Copy external scripts to your application and you’ll gain the performance benefits of the Rails asset pipeline and avoid complexity. The Rails asset pipeline will become even more important in Rails 4.0 with the new Turbolinks feature.

There's one specific action that I want to have use different CSS.

Here's an alternative way to accomplish what you're looking for:

Add the controller name and action name to the app body in your /views/layouts/application.html.rb:

<body class="<%= controller_name %>-<%= action_name %>">
  <%= yield %>

Then in your .scss file:

.controller_name-action_name {
  // your css goes here

So if your controller was static_pages and your action was home:

.static_pages-home {
  // your css goes here

Tada! Your css only appears for that specific action.

Disciplined Rails: Managing Front-End Assets - Jaryl Sim, The Rails asset pipeline can be confusing to some at first, in this tutorial you'll learn how you Duration: 6:27 Posted: Jan 31, 2016 What we need to do is add the fonts directory within the assets directory so that we can resource these files in our CSS or Sass files using proper rails conventions and the asset pipeline. The problem is, simply adding a fonts directory isn't picked up by the pipeline.

Using CSS styles with the Rails asset pipeline, Generators to create a new resource, Rails will create page-specific JS and CSS files. We add JS that loads the comments for a blog after the page loads. One way you can continue to keep things simple with the asset pipeline is to  You can confirm your app/assets/stylesheets folder it should have application.css file and you will have to precompile assets in production environment before go/start server in production environment. You can precompile assets using . RAILS_ENV=production rails assets:precompile

Page Specific Javascript Rails, A simple option for adding page-specific Javascript to a single Rails view. The asset pipeline has made including javascript in Rails applications a breeze. However, with a combination of CSS class scopes and a jQuery  There is a way to load assets per controller , but that is not what you're looking for . You may consider , that asset-pipeline (in production) precompiles and optimizes all the assets in a single file (respectively application.js and application.css) in /public.The purpose is to decrease calls to the server to fetch assets.

Page Specific Javascript in Rails, Page-specific CSS with Rails App [duplicate] - css. what you need to do: Using Rails 3.1 assets pipeline to conditionally use certain css In a nutshell, Then, in your layouts/application.html.erb file you're going to add the following lines that  The Asset PipelineThis guide covers the asset pipeline.After reading this guide, you will know: What the asset pipeline is and what it does. How to properly organize your application assets. The benefits of the asset pipeline. How to add a pre-processor to the pipeline. How to package assets with a gem.