title: How to fix Error : "Sass::SyntaxError in Posts#index" in Ruby on Rails?
body: <p>I was trying to add bootstrap to my Rails app reading a tutorial, and I got the error below. Please explain what happened, and please do edit my code to show how to fix. And any resources on Rails which you would refer to get better at it will be appreciated. 
  P.s. I'm just starting. Thank you for the read. :D </p>
  
  <p>: </p>
  
  <p>Page: http//localhost:3000/posts</p>
  
  <p>Error: </p>
  
  <blockquote>
    <p>Sass::SyntaxError in Posts#index</p>
    
    <p>File to import not found or unreadable: bootstrap. Load paths:<br>
    /Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start
    Rails/training/app/assets/config   /Users/mac/Documents/Projects/Web
    Development/Ruby On Rails/Jump Start Rails/training/app/assets/images 
    /Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start
    Rails/training/app/assets/javascripts<br>
    /Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start
    Rails/training/app/assets/stylesheets<br>
    /Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start
    Rails/training/vendor/assets/javascripts<br>
    /Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start
    Rails/training/vendor/assets/stylesheets<br>
    /Users/mac/.rvm/gems/ruby-2.3.0/gems/jquery-rails-4.2.1/vendor/assets/javascripts
    /Users/mac/.rvm/gems/ruby-2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts
    /Users/mac/.rvm/gems/ruby-2.3.0/gems/actioncable-5.0.0.1/lib/assets/compiled
    /Users/mac/.rvm/gems/ruby-2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts</p>
  </blockquote>
  
  <pre><code>Extracted source (around line #5):
  
  
  // @import "bootstrap-responsive";
  
  @import "bootstrap";
  @import "bootstrap-responsive";
  
  // body {
  </code></pre>
  
  <blockquote>
    <p>Rails.root: /Users/mac/Documents/Projects/Web Development/Ruby On
    Rails/Jump Start Rails/training</p>
    
    <p>Application Trace | Framework Trace | Full Trace
    app/assets/stylesheets/custom.css.scss:5
    app/views/layouts/application.html.erb:7:in
    `_app_views_layouts_application_html_erb___3077022213198936014_70226475759060'
    Request</p>
    
    <p>Parameters:</p>
    
    <p>None</p>
    
    <p>Toggle session dump Toggle env dump Response</p>
    
    <p>Headers:</p>
    
    <p>None</p>
  </blockquote>
  
  <p>Git Repo of files : <a href="https://github.com/ScarletMcLearn/training" rel="nofollow">https://github.com/ScarletMcLearn/training</a></p>
  
  <p>The code of "application.html.erb" file (If required):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Training&lt;/title&gt;
      &lt;%= csrf_meta_tags %&gt;
  
      &lt;%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
      &lt;%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;%= yield %&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The code of application.js file (if needed):</p>
  
  <pre><code>// This is a manifest file that'll be compiled into application.js, which will include all the files
  // listed below.
  //
  // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
  // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
  //
  // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
  // compiled file. JavaScript code in this file should be added after the last require_* statement.
  //
  // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
  // about supported directives.
  //
  //= require jquery
  
  // = require bootstrap-sprockets
  
  //= require jquery_ujs
  //= require turbolinks
  //= require_tree .
  
  
  //= require bootstrap
  </code></pre>
  
  <p>The contents of the Gemfile:</p>
  
  <pre><code>source 'https://rubygems.org'
  
  
  # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
  gem 'rails', '~&gt; 5.0.0', '&gt;= 5.0.0.1'
  # 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'
  # Use Redis adapter to run Action Cable in production
  # gem 'redis', '~&gt; 3.0'
  # Use ActiveModel has_secure_password
  # gem 'bcrypt', '~&gt; 3.1.7'
  gem 'bootstrap-sass'
  
  
  # Use Capistrano for deployment
  # gem 'capistrano-rails', group: :development
  
  group :development, :test do
    # Call 'byebug' anywhere in the code to stop execution and get a debugger console
    gem 'byebug', platform: :mri
  end
  
  group :development do
    # Access an IRB console on exception pages or by using &lt;%= console %&gt; anywhere in the code.
    gem 'web-console'
    gem 'listen', '~&gt; 3.0.5'
    # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
    gem 'spring'
    gem 'spring-watcher-listen', '~&gt; 2.0.0'
  end
  
  # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
  gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
  </code></pre>
  
  <p>My "application.css" file :</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 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 other CSS/SCSS
   * files in this directory. Styles in this file should be added after the last require_* statement.
   * It is generally better to create a new file per style scope.
   *
   *= require_tree .
   *= require_self
   */
  </code></pre>
  
  <p>My "custom.css.scss" file:</p>
  
  <pre><code>// @import "bootstrap";
  
  // @import "bootstrap-responsive";
  
  //=reqire_self
  
  @import "bootstrap";
  @import "bootstrap-responsive";
  
  // body {
  //     padding-top: 60px;
  //     padding-bottom: 40px
  // }
  // .sidebar-nav {
  //     padding: 9px 0;
  // }
  
  
  body {
      padding-top: 60px;
      padding-bottom: 40px;
  }
  .sidebar-nav {
      padding: 9px 0;
  }
  </code></pre>
  
  <p>My 'application.js' file:</p>
  
  <pre><code>// This is a manifest file that'll be compiled into application.js, which will include all the files
  // listed below.
  //
  // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
  // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
  //
  // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
  // compiled file. JavaScript code in this file should be added after the last require_* statement.
  //
  // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
  // about supported directives.
  //
  //= require jquery
  
  // = require bootstrap-sprockets
  
  //= require jquery_ujs
  //= require turbolinks
  //= require_tree .
  
  
  //= require twitter/bootstrap
  </code></pre>
  
  <p>My Gemfile:</p>
  
  <pre><code>source 'https://rubygems.org'
  
  
  # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
  gem 'rails', '~&gt; 5.0.0', '&gt;= 5.0.0.1'
  # 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'
  # Use Redis adapter to run Action Cable in production
  # gem 'redis', '~&gt; 3.0'
  # Use ActiveModel has_secure_password
  # gem 'bcrypt', '~&gt; 3.1.7'
  gem 'bootstrap-sass'
  
  gem 'sass-rails', '~&gt; 5.0'
  
  gem 'twitter-bootstrap-rails'
  
  # Use Capistrano for deployment
  # gem 'capistrano-rails', group: :development
  
  group :development, :test do
    # Call 'byebug' anywhere in the code to stop execution and get a debugger console
    gem 'byebug', platform: :mri
  end
  
  group :development do
    # Access an IRB console on exception pages or by using &lt;%= console %&gt; anywhere in the code.
    gem 'web-console'
    gem 'listen', '~&gt; 3.0.5'
    # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
    gem 'spring'
    gem 'spring-watcher-listen', '~&gt; 2.0.0'
  end
  
  # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
  gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
  </code></pre>