-1

I am new to web development and I am following Michael Hartl's Ruby on Rails Tutorial via the book's website and I am having trouble with making "Error: File to import not found or unreadable: bootstrap-sprockets." go away when I attempt to import bootstrap/bootstrap-sprockets. I realize that this question has been asked many times, but I cannot find one with an answer that does not involve modifying the application.css file.

In his book, Mr. Hartl makes a custom.css.scss file to import bootstrap and bootstrap-sprockets instead of importing them in application.css, as many other answers, as well as the bootstrap README, have suggested. When I follow his custom.css.scss approach, I get "Error: File to import not found or unreadable: bootstrap-sprockets." which appears right on the web page in the browser. The contents and styling of the page are exactly what I wanted, except for the error message that appears on top of the page contents.

Here are the contents of custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

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

I have determined that one issue is that whenever I save any changes I have made to custom.css.scss, a file called custom.css.css either gets created/modified depending on whether it existed or not and it is usually filled with the following

/*
Error: File to import not found or unreadable: bootstrap-sprockets.
        on line 1 of /home/ubuntu/workspace/sample_app/app/assets/stylesheets/custom.css.scss

1: @import "bootstrap-sprockets";
2: @import "bootstrap";
3: 
4: /* universal *\/
5: 
6: body {

Backtrace:
/home/ubuntu/workspace/sample_app/app/assets/stylesheets/custom.css.scss:1
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/import_node.rb:67:in `rescue in import'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/import_node.rb:45:in `import'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/import_node.rb:28:in `imported_file'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/import_node.rb:37:in `css_import?'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/perform.rb:311:in `visit_import'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/stack.rb:79:in `block in with_base'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/stack.rb:115:in `with_frame'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/stack.rb:79:in `with_base'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/perform.rb:158:in `visit'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/base.rb:52:in `map'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/base.rb:36:in `block in visit'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/perform.rb:157:in `visit'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/visitors/perform.rb:8:in `visit'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/root_node.rb:36:in `css_tree'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/engine.rb:378:in `_render_with_sourcemap'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/engine.rb:295:in `render_with_sourcemap'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/plugin/compiler.rb:490:in `update_stylesheet'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/plugin/compiler.rb:209:in `each'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/plugin.rb:82:in `update_stylesheets'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/exec/sass_scss.rb:364:in `watch_or_update'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/exec/sass_scss.rb:51:in `process_result'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/exec/base.rb:52:in `parse'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/lib/sass/exec/base.rb:19:in `parse!'
/usr/local/rvm/gems/ruby-2.2.1/gems/sass-3.4.18/bin/scss:13:in `<top (required)>'
/usr/local/rvm/gems/ruby-2.2.1/bin/scss:23:in `load'
/usr/local/rvm/gems/ruby-2.2.1/bin/scss:23:in `<main>'
*/
body:before {
  white-space: pre;
  font-family: monospace;
  content: "Error: File to import not found or unreadable: bootstrap-sprockets.\A         on line 1 of /home/ubuntu/workspace/sample_app/app/assets/stylesheets/custom.css.scss\A \A 1: @import \"bootstrap-sprockets\";\A 2: @import \"bootstrap\";\A 3: \A 4: /* universal */\A 5: \A 6: body {"; }

If I delete the custom.css.css file, and reload the page in the browser, the error message goes away from the web page. But when I edit/save custom.css.scss, custom.css.css gets re-created with the same contents and will show the error message when I reload the page in the browser.

Also, if I removed both imports from custom.css.scss, then the resulting custom.css.css file will contain the exact same contents as the modified custom.css.scss without any error messages, so it seems that the error lies in the importing of bootstrap and bootstrap-sprockets.

By the way, I am copying and pasting code straight out of the book's web site, so I am using whatever versions of gems that happen to be on the website as of 9/12/2015. So my gemfile is as follows (this is the final gemfile in Listing 11.67 of the book)

source 'https://rubygems.org'

gem 'rails',                   '4.2.2'
gem 'bcrypt',                  '3.1.7'
gem 'faker',                   '1.4.2'
gem 'carrierwave',             '0.10.0'
gem 'mini_magick',             '3.8.0'
gem 'fog',                     '1.26.0'
gem 'will_paginate',           '3.0.7'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'bootstrap-sass',          '3.2.0.0'
gem 'sass-rails',              '5.0.2'
gem 'uglifier',                '2.5.3'
gem 'coffee-rails',            '4.1.0'
gem 'jquery-rails',            '4.0.3'
gem 'turbolinks',              '2.3.0'
gem 'jbuilder',                '2.2.3'
gem 'sdoc',                    '0.4.0', group: :doc

group :development, :test do
  gem 'sqlite3',     '1.3.9'
  gem 'byebug',      '3.4.0'
  gem 'web-console', '2.0.0.beta3'
  gem 'spring',      '1.1.3'
end

group :test do
  gem 'minitest-reporters', '1.0.5'
  gem 'mini_backtrace',     '0.1.3'
  gem 'guard-minitest',     '2.3.1'
end

group :production do
  gem 'pg',             '0.17.1'
  gem 'rails_12factor', '0.0.2'
  gem 'puma',           '2.11.1'
end

I have spent a lot of time trying to follow the tutorial as closely as possible, so I would appreciate any help in resolving this error without modifying application.css, as the tutorial does not do this.

And one final note: I have been very careful in restarting Rails Server, so I believe that that is not the issue.

Phillip D.
  • 123
  • 1
  • 6
  • possible duplicate of [Sass::SyntaxError: File to import not found or unreadable: bootstrap-sprockets](http://stackoverflow.com/questions/26135126/sasssyntaxerror-file-to-import-not-found-or-unreadable-bootstrap-sprockets) – Brad Werth Sep 13 '15 at 05:37
  • Did you try using the latest version of boostrap-sass? – trosborn Sep 13 '15 at 07:19

2 Answers2

1

After a couple more hours of searching, I found that my question is a duplicate of this one. I had an issue with the Cloud9 IDE auto-building whenever I saved.

Community
  • 1
  • 1
Phillip D.
  • 123
  • 1
  • 6
  • I also have a follow-up question (that may be because I am unfamiliar with the topic of SASS and CSS preprocessing), but am I still supposed to be producing a custom.css.css file from my custom.css.scss file eventually? I have disabled auto-build, so custom.css.css never gets created. It solves my issue, but I do not know if this is actually "correctly" solving the problem. – Phillip D. Sep 13 '15 at 10:46
0

I was having the similar error when I reading Michael Hartl's Ruby on Rails Tutorial.

However, I didn't encounter it during the tutorial document, I got the error when I was working on the practice after chapter 5.

And the odd thing is, I only got this error message with Guard, which was introduced in chapter 3. If I user rake test to run test manually, no errors.

And of course I DID restart the rails server after I changed Gemfile or anything else.

I thought it was the problem of my test code, but when I was trying to examine the pages with my eyes, I found something.

I recoded the title of "Sign Up" page to "Sign up", so this time the page's title should be "Sign up" instead of "Sign Up". But it was not changing. I changed lots of content of this page and refresh it, no changes. At last I deleted all the code of this page(I mean this view), no.

But for other pages, still work.

So I thought maybe the problem with Cloud9. I cloned the code from Github to my local machine and bundle install, started the server, no more issues. I ran Guard for auto test, no errors again.

I don't known if it is really some bugs of Cloud9, but I do known my code is not the reason for now. Still looking for more related question of it.

My mother tongue is not English, please forgive if there is syntax errors of spelling mistakes. Thanks.

Zexin
  • 1