How to implement custom css in Ruby on Rails application?

Question

I could not implement customer css in Ruby on Rails application. The changes that I've made locally don't shown up on the pages in Heroku.

I find similar question and one answer on it.
Even so this answer was not marked as the solution, I’ve changed files accordingly this answer and the link provided(see below). Yet, I still could not implement customer css.

Ruby on Rails Tutorial custom CSS not showing up in app

//edited

I find that the possible reason for not shown up css is that precompile run locally(link below) and deleted as suggested file .json. But the custom.css is not implemented yet.

https://help.heroku.com/TEN5TWQ1/why-are-my-css-js-changes-not-showing-up-in-my-rails-app

    ‘’’ Gemfile’’’
    gem 'bootstrap-sass',          '3.3.6'
    gem 'sass-rails',              '5.0.6'

‘’’app/assets/stylesheets/application.scss’’’ -edited

@import main;
@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";
@import "styles";
@import 'colors';
@import "sessions";
@import "users";

‘’’app/assets/javascripts/application.js’’’

     //= require jquery
    //= require jquery_ujs

    //= require bootstrap

//= require_tree .

    bundle install

//edited

'''application.html.erb'''

    !DOCTYPE html>
    <html>
      <head>
        <title><%= full_title(yield(:title)) %></title>
        <%= stylesheet_link_tag "application", media: "all",
                                               "data-turbolinks-track" => true %>
        <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
        <%= csrf_meta_tags %>
        <%= render 'layouts/shim' %>
      </head>
       <body>
        <body>
        <%= render 'layouts/header' %>
        <div class="container">
          <% flash.each do |message_type, message| %>
            <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
          <% end %>
          <%= yield %>
          <%= render 'layouts/footer' %>
          <%= debug(params) if Rails.env.development? %>
        </div>
      </body>
    </html>


    <% flash.each do |message_type, message| %>
            <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
          <% end %>



    //custom.css.scss(first lines)
    //edited


        * mixins, variables, etc. */
    .t-a
     {
    color: red;
    }


//applicatio.css.scss
//edited

    *
     * 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,

     *= require_tree .
     *= require_self
     *= require custom.css.scss
     */

    @import "bootstrap-sprockets";
    @import "bootstrap";
    @import "custom";
    @import "styles";

Can you copy your views/layout/application.html.erb file in your question ? — Maxence
– Maxence, Commented Apr 5, 2019 at 0:26
That is strange. Your application.html.erb layout view imports a single file : application.scss which itself imports custom.css. Try to rename application.scss into application.css.scss to properly show preprocessors. And also copy your custom.css file here. Also what change from your css file is not showing ? No css files attached at all ? — Maxence
– Maxence, Commented Apr 7, 2019 at 1:23

Pragya Sriharsh · Accepted Answer · 2019-04-13 21:36:14Z

1

Always follow one approach. Either

1) if you are using .scss file then use @import only.

  @import "custom"

Remove all other syntax like *=require "custom"

Or 2) If you are using .css file then use only below syntax

  *= require "custom"

And remove all @import syntax

Never mix them like you did in your code.

Do one thing , follow second one approach. And require your custom css file just above the *=require_tree . For ex.

 *=require "custom"
 *=require_tree .

Then let me know. After doing this, do not forget to restart your server as these files load once at the time server start.

answered Apr 13, 2019 at 21:36

Pragya Sriharsh

5593 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

T M Over a year ago

I've updated(see initial version) but no any changes shown.

Pragya Sriharsh Over a year ago

No need to write require 'custom' in application.css file as require_tree already import all the file that is under the stylesheets folder. Anyway have you checked rails console or browser console for the errors ? Remove @import in custom.scss file, no need. Can you show the current application.css for both js and css file. Please edit your question for code.

T M Over a year ago

the application.scss was shown already (there are 3 line @import), the application.js was added.

Pragya Sriharsh Over a year ago

Oh! Then everything looks perfect. One last option just run command.. rake assets:clobber .... After that restart the server then check it.

T M Over a year ago

This cimmand Removed …..new/public/assets And then Precompiling assets failed. And it doesn’t changed any custom formatting and I could not push to heroku and need go back. And even if I go back heroku still show that my branch ahead of one comment and it actually delete publ/assets dir ... that why probably this error occurred

|

mechnicov · Accepted Answer · 2019-04-14 05:49:57Z

1

You need to have app/assets/stylesheets/application.scss and rename all .css in .scss.

Then in your app/assets/stylesheets/application.scss delete all *= require and use:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";

In your app/assets/stylesheets/custom.scss use just usual CSS-classes and SCSS without any @import.

Be careful and don't use in both files the same classes because of overriding.

If you decide to have new file says app/assets/stylesheets/styles.scss.

You need to add to application.scss

@import "styles";

That should works perfectly.

edited Apr 14, 2019 at 5:49

answered Apr 13, 2019 at 16:30

mechnicov

16.2k5 gold badges48 silver badges69 bronze badges

1 Comment

T M Over a year ago

I would like anything that show any of my customization, like color h1, h2 and so on . I can override Bootstrap classes or not -it doesn't matter. So, I took of "s" from customs but there is no effect at all - noting changes.

Maxence · Accepted Answer · 2019-04-07 09:35:40Z

I am not an Ruby expert. I will give advice based on my experience, that may differ from actual good practice.

1st thing: If you are writing Sass, I have realised it is good practice to show all preprocessors in the file name. The way it works is that the furthest preprocessor from file name will be interpreted first. For example: file whatever.js.coffee.erb will be first interpreted by Ruby interpreter, then by coffee script interpreter, and then final file will be some javascript.

When compiling my assets locally I have noticed I had to be explicit with names. So basically renaming application.scss to application.css.scss is harmless and good practice.

(though it may not be the source of your problem)

2nd thing: The bits you have provided don't really explain why custom.css styles are not showing in your view.

Why ?

Because your code "looks" good to me.

What is it doing ?

Well your Rails app has stylesheets located in app/assets/stylesheets. Though those stylesheets will not automagically appear on your web pages.

In order to add these stylesheets to your pages there is a helper called stylesheet_link_tag. stylesheet_link_tag will just add a link to the stylesheet file in your HTML page. It needs be placed between <head></head> html tags.

In Rails though you don't recreate the <head></head> tags for every page. All views inerhit from a global layout template called application.html.erb (you know about this one, you copied content) and this is the place you can globally handle stylesheets attachment.

In your tutorial, the mentor has added a single stylesheet in the application.html.erb file : application (Rails will understand it as application.css or application.css.scss ... and try to find it in the app/assets/stylesheets folder) . All the webpages of your website will have this very stylesheet.

But then you tell me : "how can I have a single file for my whole app.. I have lots of controllers and views?"

This is where it gets interesting: there are a few tricks to tweek this stylesheet. Mostly @import and *= require. Both allow to import other stylesheets into the current stylesheet. (require is Ruby, import is Sass)

/*
 *= require custom.css.scss 
*/
@import "custom";

The above code will do the same: aggregate the file custom.css.scss to application.css. If you add more files they will be aggregated too.

some specifics:

*= require_tree. will import every stylesheet in app/assets/stylesheets folder. Quite convenient if you want to make a very big css file that can be used on every page of your site.

*= require_self will process what is after the commmented part. basically it says: "disregard the styles, just do the require things"

Ok now what you can do :

rename application.scss to application.css.scss
reinstate require_self : I am not sure it actually has any effect on the @imports but it is no harm to have it.

If that does not solve your problem : Add the custom file in a require :

 /*
   *= require custom.css.scss 
 */

It should not fail (don't forget to rename custom as per above though)

Last think: reinstate require tree. It should gather all stylesheet files and aggregate them to application.css (here I write application.css because I talk about the stylesheet in the final webpage and not the file in your Rails app)(also in development your application.css file may not look aggregated but it will in production)

You wrote that you are not Ruby expert and it maybe not good practice and suggest to reinstall some code that was precisely suggested to be deleted (the link in the initial question) and the person who gave this suggestion maybe an export and it is good practice.....yet it doesn't work. I'll try your suggestion and mark as solution if it works or ask some specific question regarding.

T M · Accepted Answer · 2019-04-20 16:18:36Z

You could implement customer css in Ruby on Rails application. For example, you could change a color of the texts or the links, or the font sizes regardless of the first or the second approach(see below)

the first approach:

using import statements in application.scss:

    @import "bootstrap-sprockets";
    @import "bootstrap";
    @import "custom";
    @import "styles";

the second approach:

   a) using import statements in custom.scss :
      @import "bootstrap-sprockets";
      @import "bootstrap";

   b) using statements as below in the application.scss:
         *= require_tree .
         *= require_self

You should not mix up the first and the second approach.

    You could not change hover as you would  like because
    it need to be to complied with bootstrap settings.
    For example, changing hover to green or red produces error.
    So, I ended up using the grey-darker color(see below) instead.
    You could override bootstrap but it is considered as the
    bad idea. 


    examples of changing  formatting:

        h1.green-text { color: green; font-size: 10em; }

        <h1 class="green-text">This text is very large and green
        </h1>


        a {
         color: green;
         &:hover {
             color: $gray-darker;
           }

         }

Merey Nurlan · Accepted Answer · 2020-08-31 09:32:17Z

0

I saw in one answer that it was resolved by putting @import "custom" above @import "boostrap". May be you should try that.

answered Aug 31, 2020 at 9:32

Merey Nurlan

3156 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to implement custom css in Ruby on Rails application?

5 Answers 5

10 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related