How to customize devise form css in rails

Question

Command rails generate devise:views successfully created folders under \app\views\users

I am looking to customize the devise forms but not sure whether the css to be placed in application.css or i need to separately create user.css.scss. Googled a bit and check git doc for this but none is specifying for CSS handling in devise.

Let me know the correct way of handling it

Answer 1

Devise will use you default layout. So the CSS that you are using in your views/layouts/application.html.erb will be used in your generated devise views.

If you want devise specific layouts, you can create a views/layouts/devise.html.erb file where you can serve devise specific CSS. It will pick it up automatically because of Rails naming conventions.

The above will work for any controller, just add a file in layouts named after the controller eg. views/layouts/reservations.html.erb for ReservationsController

You can also add specific layouts for the Devise::RegistrationsController by making a directory views/layouts/devise and adding views/layouts/devise/registrations.html.erb

Answer 2

If you are doing controller-specific stylesheets, that is, if you switched off automatic compilation of all of your stylesheets into application.css, you should name your stylesheet after a devise controller, e.g.:

registrations.css.scss

and add it to Rails.application.config.assets.precompile list in assets.rb.

The placement of the stylesheet is standard, app/assets/stylesheets/ so watch for name collisions between devise's controllers and yours.

To pick up a controller-specific stylesheet in a layout you need something like this:

Rails up to 4.1

<%= stylesheet_link_tag controller_name, media: 'all' if Rails.application.assets.find_asset("#{controller_name}.css") %>

Rails 4.2+

<%= stylesheet_link_tag controller_name, media: 'all' if asset_present?("#{controller_name}.css") %>

# ...meanwhile, somewhere in the helpers...

def asset_present?(name)
  # Rails 4.1 had Rails.application.assets filled out in all environments.
  # Rails 4.2 has it filled only when config.assets.compile == true which is only
  # in development by default.
  if Rails.application.assets.present?
    Rails.application.assets.find_asset(name)
  else
    Rails.application.assets_manifest.files.values.map { |v| v['logical_path'] }.include?(name)
  end
end