title: Ruby on Rails Tutorial custom CSS not showing up in app
body: <p>I'm running the Ruby on Rails Tutorial from Michael Hartl and my boostrap sass is working however I can not get any custom modifications to show up..</p>
  
  <p>In chapter 5.5 we add the bootstrap sass gem. This is my Gem file:</p>
  
  <pre><code># Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
  gem 'rails', '~&gt; 5.0.6'
  gem 'sass', '~&gt; 3.5', '&gt;= 3.5.5'
  gem 'autoprefixer-rails', '~&gt; 7.2', '&gt;= 7.2.5'
  gem 'bootstrap-sass', '3.3.7'
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3'
  # Use Puma as the app server
  gem 'puma', '~&gt; 3.0'
  # Use SCSS for stylesheets
  gem 'sass-rails', '~&gt; 5.0'
  # Use Uglifier as compressor for JavaScript assets
  gem 'uglifier', '&gt;= 1.3.0'
  # Use CoffeeScript for .coffee assets and views
  gem 'coffee-rails', '~&gt; 4.2'
  # See https://github.com/rails/execjs#readme for more supported runtimes
  # gem 'therubyracer', platforms: :ruby
  
  # Use jquery as the JavaScript library
  gem 'jquery-rails'
  # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
  gem 'turbolinks', '~&gt; 5'
  # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
  gem 'jbuilder', '~&gt; 2.5'
  </code></pre>
  
  <p>After bundle install I am instructed to create a custom css file under</p>
  
  <pre><code>app/assets/stylesheets/custom.scss
  </code></pre>
  
  <p>here we have to put the following to import bootstrap:</p>
  
  <pre><code>@import "bootstrap-sprockets";
  @import "bootstrap";
  </code></pre>
  
  <p>but also some custom CSS that we write, so the custom.scss file looks like:</p>
  
  <pre><code>@import "bootstrap-sprockets";
  @import "bootstrap";
  
  
  
  body {
    padding-top: 60px;
  }
  
  section {
    overflow: auto;
  }
  
  textarea {
    resize: vertical;
  }
  
  .center {
    text-align: center;
  }
  
  .center h1 {
    margin-bottom: 10px;
  }
  
  /* typography */
  
  h1, h2, h3, h4, h5, h6 {
    line-height: 1;
  }
  
  h1 {
    font-size: 3em;
    letter-spacing: -2px;
    margin-bottom: 30px;
    text-align: center;
  }
  
  h2 {
    font-size: 1.2em;
    letter-spacing: -1px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: normal;
    color: #777;
  }
  
  p {
    font-size: 1.1em;
    line-height: 1.7em;
  }
  
  /* header */
  
  #logo {
    float: left;
    margin-right: 10px;
    font-size: 1.7em;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -1px;
    padding-top: 9px;
    font-weight: bold;
  }
  
  #logo:hover {
    color: #fff;
    text-decoration: none;
  }
  </code></pre>
  
  <p>I restart the server and look at my app and boostrap has loaded fine but the custom CSS changes are nowhere to be found!</p>
  
  <p>If i look at the souce code all the css files are compiled</p>
  
  <pre><code>&lt;link rel="stylesheet" media="all" href="/assets/custom.self-871a674bf18d1e8205b6a321a40cf6fdedb44cd5879414e213f9011fba10d9b0.css?body=1" data-turbolinks-track="reload" /&gt;
  &lt;link rel="stylesheet" media="all" href="/assets/static_pages.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /&gt;
  &lt;link rel="stylesheet" media="all" href="/assets/application.self-af04b226fd7202dfc532ce7aedb95a0128277937e90d3b3a3d35e1cce9e16886.css?body=1" data-turbolinks-track="reload" /&gt;
  </code></pre>
  
  <p>when I open the custom.cscc file I see the full bootstrap source code imported from boostrap-sass gem but my custom modifications are nowhere to be found. How can I ensure these get compiled along with bootstrap?</p>
  
  <p>Playing around I realized I can't really make any modifications.. everything seems to be fixed.</p>
  
  <p>I've tried restarting the server several times, refreshing, and trying different browsers (to ensure there is a clean cache).</p>
  
  <p>Edit:</p>
  
  <p>my application.css (the tutorial never instructs to change to .css.scss)</p>
  
  <pre><code>/*
   * 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 vendor/assets/stylesheets of plugins, if any,
   * 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_self
   */
  </code></pre>