Error: File to import not found or unreadable: mycustom.scss. running: rake assets:precompile

Question

I'm having the error described above. I've seen a lot of questions where the answer is "Restart the rails server". But this is not my case since this is not a rails server error.

As my project is not working quite well in Heroku (dropdown not working) but in local env is doing really good, i'm trying to compile all the assets before deploying with bundle exec rake assets:precompile but it throws me the error:

~/.rvm/rubies/ruby-1.9.3-p448/bin/ruby ~/.rvm/gems/ruby-1.9.3-p448@global/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
rake aborted!
File to import not found or unreadable: mycustom.scss.
Load path: ~/RubyProjects/sample_app_2
  (in ~/RubyProjects/sample_app_2/app/assets/stylesheets/application.css)

i figured it out to be a sass problem so i ran bundle exec sass app/assets/stylesheets/mycustom.scss

but it throws the error:

Syntax error: File to import not found or unreadable: bootstrap
Load path: ~/RubyProjects/sample_app_2

so i think the problem is that bootstrap is not included somewhere in the project. Because if i run

bundle exec sass ~/.rvm/gems/ruby-1.9.3-p448@scaffold-example/gems/bootstrap-sass-2.0.0/vendor/assets/stylesheets/_bootstrap.scss

it shows like 4000+ lines of css.

Am i doing something wrong?

Should i do something else?

Here is my Gemfile

  source 'https://rubygems.org'

  gem 'rails', '3.2.3'
  gem 'bootstrap-sass', '2.0.0'
  gem 'bcrypt-ruby', '3.0.1'
  gem 'sass-rails', '3.2.4'
  #gem 'bcrypt-ruby', '3.1.1.rc1', :require => 'bcrypt'
  #gem 'bcrypt-ruby', '3.1.0', :require => 'bcrypt'
  #gem 'bcrypt-ruby', git: 'https://github.com/codahale/bcrypt-ruby.git', :require => 'bcrypt'
  #gem 'bcrypt-ruby', git: 'git@github.com:hananamar/bcrypt-ruby.git', :require => 'bcrypt'
  #gem 'bcrypt-ruby', :require => 'bcrypt'

  group :development do
    gem 'sqlite3', '1.3.8'
    gem 'rspec-rails', '2.9.0'
    gem 'guard-rspec', '0.5.5'
    gem 'annotate', '~> 2.4.1.beta'
  end
  # Gems used only for assets and not required
  # in production environments by default.
  group :assets do

    gem 'coffee-rails', '3.2.2'
    gem 'uglifier', '1.2.3'
  end

  gem 'jquery-rails', '2.0.1'

  #Test gems on Linux
  group :test do
    gem 'rspec-rails', '2.9.0'
    gem 'capybara', '1.1.2'
    gem 'rb-inotify', '0.8.8'
    gem 'libnotify', '0.5.9'
    gem 'guard-spork', '0.3.2'
    gem 'spork', '0.9.0'
    gem 'factory_girl_rails', '1.4.0'
  end

  group :production do
    gem 'pg', '0.17.0'
  end


  #T#est gems on Windows
  #group :test do
  #  gem 'rspec-rails', '2.9.0'
  #  gem 'capybara', '1.1.2'
  #  gem 'rb-fchange', '0.0.5'
  #  gem 'rb-notifu', '0.0.4'
  #  #gem 'win32console', '1.3.0'
  #  gem 'guard-spork', '0.3.2'
  #  gem 'spork', '0.9.0'
  #  gem 'factory_girl_rails', '1.4.0'
  #end

and mycustom.scss

@import "bootstrap";

/* mixins, variables, etc. */
$lightGray: #999;
$grayMediumLight: #eaeaea;

@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* universal */

html {
  overflow-y: scroll;
}

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1{
    margin-bottom: 10px;
  }
}

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: $lightGray;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  line-height: 1;
  &:hover{
    color: #000;
    text-decoration: none;
  }

}

footer {
  margin-top: 45px;
  margin-left: 100px;
  margin-right: 100px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: $lightGray;

  a{
    color: #555;
    font-weight: bold;
    &:hover{
      color: $lightGray;
    }
  }

  small{
    float: left;
  }

  ul {
    float: right;
    list-style: none;

    li {
      float: left;
      margin-left: 10px;
    }

  }
}

/* sidebar */
aside {
  section {
    padding: 10px 0;
    border-top: 1px solid $grayLighter;
    &:first-child {
      border: 0;
      padding-top: 0;
    }
    span {
      display: block;
      margin-bottom: 3px;
      line-height: 1;
    }
    h1 {
      font-size: 1.6em;
      text-align: left;
      letter-spacing: -1px;
      margin-bottom: 3px;
    }
  }
}

.gravatar {
  float: left;
  margin-right: 10px;
}

/* miscellaneous */
.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box_sizing;
}

/* forms */
input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  height: auto;
  margin-bottom: 15px;
  @include box_sizing;
}

#error_explanation {
  color: #f00;
  ul {
    list-style: none;
    margin: 0 0 18px 0;
  }
}
.field_with_errors {
  @extend .control-group;
  @extend .error;
}

Answer 1

The problem was that sass wasn't processing my application.css as it should. It wasn't only mycustom.css.scss file that failed, it was every file with extension .scss.

I had to rename my application.css to application.scss.

Answer 2

the main application.css.scss file that is included in the template file (/app/view/layouts/application.html.haml) has to live inside the folder - /app/assets/stylesheets. I had this weird problem where the mail application.css.scss file was inside a folder - app/assets/stylesheets/new_site/application.css.scss.

And in my application.css.scss file I had imported bootstrap as @import "bootstrap"; which failed to find the mixins/hide_text mixin. After moving the application.css.scss file up level up, this resolved the issue.

I am using Rails 3.2.1.