title: Rails: File to import not found or unreadable: "bootstrap"
body: <p>I am relatively new to programming, therefore I hope that the question is not absolutely stupid.</p>
  
  <p>I got a problem concerning my rails app.</p>
  
  <p>I try to use bootstrap. I built a file called "custom.css.scss" and used the "@import "bootstrap"" line in it.</p>
  
  <p>The problem is: Each time I save my "custom.css.scss" file a new file "custom.css" is automatically generated and I get the following message: "custom.css.scss File to import not found or unreadable:bootstrap".</p>
  
  <p>The funny thing is: When I delete the file "custom.css.scss" and refresh my browser, everything is fine (which means: bootstrap is used).</p>
  
  <p>Do you have any idea, what could be the reason?</p>
  
  <p>Kindest regards
  Chris</p>
  
  <p>P.S.: This is my installed gem file</p>
  
  <pre><code>source 'https://rubygems.org'
  
  gem 'rails', '3.2.11'
  gem 'bootstrap-sass', '2.1'
  gem 'bcrypt-ruby', '3.0.1'
  gem 'faker', '1.0.1'
  gem 'will_paginate', '3.0.3'
  gem 'bootstrap-will_paginate', '0.0.6'
  gem 'jquery-rails', '2.0.2'
  
  group :development, :test do
    gem 'sqlite3', '1.3.5'
    gem 'rspec-rails', '2.11.0'
    # gem 'guard-rspec', '1.2.1'
    # gem 'guard-spork', '1.2.0'  
    # gem 'spork', '0.9.2'
  end
  
  # Gems used only for assets and not required
  # in production environments by default.
  group :assets do
    gem 'sass-rails',   '3.2.5'
    gem 'coffee-rails', '3.2.2'
    gem 'uglifier', '1.2.3'
  end
  
  group :test do
    gem 'capybara', '1.1.2'
    gem 'factory_girl_rails', '4.1.0'
    gem 'cucumber-rails', '1.2.1', :require =&gt; false
    gem 'database_cleaner', '0.7.0'
    gem 'launchy', '2.1.0'
    # gem 'rb-fsevent', '0.9.1', :require =&gt; false
    # gem 'growl', '1.0.3'
  end
  
  group :production do
    gem 'pg', '0.12.2'
  end
  </code></pre>
  
  <p>The custom.css.scss file look like this</p>
  
  <pre><code>@import "bootstrap";
  
  /* universal */
  
  html {
      overflow-y:scroll
  }
  
  body {
      padding-top: 60px
  }
  
  section {
      overflow: auto;
  }
  
  textarea {
      resize: vertial;
  }
  
  .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.7em;
      letter-spacing: -1px;
      margin-bottom: 30px;
      text-align: center;
      font-weight: normal;
      color: #999;
  }
  
  p {
      font-size: 1.1em;
      line-height: 1.7em;
  }
  </code></pre>