title: How to implement custom css in Ruby on Rails application?
body: <p>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.</p>
  
  <p>I find similar question and one answer on it.<br>
  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. </p>
  
  <p><a href="https://stackoverflow.com/questions/48371744/ruby-on-rails-tutorial-custom-css-not-showing-up-in-app">Ruby on Rails Tutorial custom CSS not showing up in app</a></p>
  
  <p>//edited</p>
  
  <p>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.</p>
  
  <p><a href="https://help.heroku.com/TEN5TWQ1/why-are-my-css-js-changes-not-showing-up-in-my-rails-app" rel="nofollow noreferrer">https://help.heroku.com/TEN5TWQ1/why-are-my-css-js-changes-not-showing-up-in-my-rails-app</a></p>
  
  <pre><code>    ‘’’ Gemfile’’’
      gem 'bootstrap-sass',          '3.3.6'
      gem 'sass-rails',              '5.0.6'
  </code></pre>
  
  <p>‘’’app/assets/stylesheets/application.scss’’’ -edited</p>
  
  <pre><code>@import main;
  @import "bootstrap-sprockets";
  @import "bootstrap";
  @import "custom";
  @import "styles";
  @import 'colors';
  @import "sessions";
  @import "users";
  </code></pre>
  
  <p>‘’’app/assets/javascripts/application.js’’’</p>
  
  <pre><code>     //= require jquery
      //= require jquery_ujs
  
      //= require bootstrap
  
  //= require_tree .
  
      bundle install
  
  //edited
  
  '''application.html.erb'''
  
      !DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;title&gt;&lt;%= full_title(yield(:title)) %&gt;&lt;/title&gt;
          &lt;%= stylesheet_link_tag "application", media: "all",
                                                 "data-turbolinks-track" =&gt; true %&gt;
          &lt;%= javascript_include_tag "application", "data-turbolinks-track" =&gt; true %&gt;
          &lt;%= csrf_meta_tags %&gt;
          &lt;%= render 'layouts/shim' %&gt;
        &lt;/head&gt;
         &lt;body&gt;
          &lt;body&gt;
          &lt;%= render 'layouts/header' %&gt;
          &lt;div class="container"&gt;
            &lt;% flash.each do |message_type, message| %&gt;
              &lt;%= content_tag(:div, message, class: "alert alert-#{message_type}") %&gt;
            &lt;% end %&gt;
            &lt;%= yield %&gt;
            &lt;%= render 'layouts/footer' %&gt;
            &lt;%= debug(params) if Rails.env.development? %&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  
  
      &lt;% flash.each do |message_type, message| %&gt;
              &lt;%= content_tag(:div, message, class: "alert alert-#{message_type}") %&gt;
            &lt;% end %&gt;
  
  
  
      //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";
  </code></pre>