How to Associate a CSS/Sass Stylesheet to a View in Rails

How do you associate a css/sass stylesheet to a view in rails?

The best way would be to put a named yield in your application layout:

<%= yield :head %>

Then use a content for block in your view:

<% content_for :head do %>
<%= stylesheet_link_tag :my_css -%>
<% end %>

using a different style for different views in rails

The styles and javascripts are loaded from your layout. Out of the box it looks like this:
app/views/layouts/application.html.erb

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

If you only want to include particular css files in a particular view, you would need to:

  • Create a layout for your particular view.
  • Include the appropriate styles and javascripts in the layout.
  • Specify the particular layout in your controller.

Here is some more information on layouts, but lets go through it for your login example.

app/controllers/sessions/create

class SessionsController < ApplicationController
layout 'login', only: [:new]
# you could also call the layout "sessions.html.erb" and it will be
# loaded automagically

If you want to use a different layout for different actions in the same controller, you can add other layout methods and specify the actions they apply to with the only action.

Then the layout

app/views/layouts/login.html.erb

...
<%= stylesheet_link_tag 'login', media: 'all' %>
...

And finally your stylesheet

app/assets/stylesheets/login.scss

@import "file_you_want";

If you require_tree . it will load all styles in the stylesheets directory which I don't think is what you are after.

Adding a specific stylesheet to a single Rails page

One way would be to target your controller and action using CSS classes.

In your app/views/layouts/application.html.erb, add controller_name and action_name method calls to generate the CSS classes.

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

CSS

html { height: 100% }

body.home {
height: 100%;
background: url('assets/image.jpg') no-repeat center center;
background-size: cover;
font-family: Arial;
}

.home h1 {
color: black;
font-style: bold;
text-align: center;
}

Rails How to include a scss file in a specific erb view?

Because you are including it independently, and not including it in your application.css. The default for the asset pipeline is to compile applicaiton.css/application.js and anything that is included in those files.

/*
* 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require c3
*= require purecss
*= require_self
*= require pure_css_reset
*/

If you want it to be seperate and not compiled into the one monolithic file, being called from your stylesheet_link_tag, you have to manually add it to the precompile array.

http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets is a good reference.

Rails - How to set 1 scss file for 1 view

The most important piece you are probably missing is that Sprockets won't serve any asset, mainly the css and js need to be declared in your asset manifest. Quoting the docs:

If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the precompile array in config/initializers/assets.rb:

      Rails.application.config.assets.precompile += ['admin.js', 'admin.css', 'swfObject.js']

Use the expected resulting name (with .css extension) and not the source file (with the .scss extension).

How to link scss file with style sheet link tag in Ruby on Rails

Only application.css.scss is precompiled by default. All files that are required through this file are also compiled. Normally, you would request your other files from within this file using either *= require_tree and *= require_self or @import.

If you still want to explicitly include the main.css.scss using stylesheet_link_tag like in your question, you need to add it to your list of precompiled assets in config/initializers/assets/ like so:

Rails.application.config.assets.precompile += %w( main.css )

How do I use Controller specific stylesheets in Rails 3.2.1?

I don't think it works that way (Home.css being applied only to Home controller actions). The different files are just for separation, to make it clearer what are the CSS rules describing. You can read this guide about the asset pipeline. I'm guessing you altered the default application.css.scss and removed the line importing all CSS files from app/assets/stylesheets.

Rails3.1 - How do I include css files in some views but not others?

In Rails 3.1, all your stylesheets will be merged into the application.css if your application.css looks like:

/*
* 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 .
*/

It's due to the *=require_tree .

You can require a specific stylesheet with:

*= require main

Otherwise, in your layout, you write:

%head
= yield :head

and in your page:

= content_for :head do
= stylesheet_link_tag 'stylesheet'


Related Topics



Leave a reply



Submit