Heroku deployment - Sass::SyntaxError: File to import not found or unreadable: bootstrap-sprockets

Question

I was started using bootstrap version 4. And started receiving this error deploying to Heroku. my stylesheet is custom.css.scss. App works in development with not problem. Issued did not start to upgraded to bootstrap v4. When I was using the bootstrap v3 I did not have this problem with deployment ever.I have spend lot of reviewing different suggestions from other posts to no avail.

bootstrap.custom.css.scss file

 @import "bootstrap";

applications.scss

 /*
 *= require_tree .
 *= require_self
 */

application.js

  = require jquery
  = require tether
  = require bootstrap-sprockets
  = require jquery_ujs
  = require turbolinks
  = require_tree .

Error from heroku deployment

rake aborted! 
Sass::SyntaxError:File to import not found or unreadable:bootstrap-sprockets.
remote: Load paths:
remote: /tmp/build_9899a15a0b71b25c23a9b8dfc6d02e80/app/assets/images
remote:/tmp/build_9899a15a0b71b25c23a9b8dfc6d02e80/app/assets/javascripts
remote:/tmp/build_9899a15a0b71b25c23a9b8dfc6d02e80/app/assets/stylesheets
remote:/tmp/build_9899a15a0b71b25c23a9b8dfc6d02e80/vendor/assets/javascripts
remote:/tmp/build_9899a15a0b71b25c23a9b8dfc6d02e80/vendor/assets/stylesheets

Gemfile

 gem 'rails', '4.2.0'
 gem 'pg'
 gem 'sass-rails', '>= 5.0'
 gem 'uglifier', '>= 1.3.0'
 gem 'coffee-rails', '~> 4.1.0'
 gem 'jquery-rails'
 gem 'turbolinks'
 gem 'jbuilder', '~> 2.0'
 gem 'sdoc', '~> 0.4.0', group: :doc

Installed gems

 gem 'bootstrap', '~> 4.0.0.alpha3'
 gem 'sass', '~> 3.4', '>= 3.4.21'
 gem 'sprockets-rails', '~> 3.0'
 source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
 end
 gem 'rails_12factor', group: :production
 gem 'font-awesome-rails', '~> 4.4.0.0'
 gem 'pry-rails', :group => :development
 gem 'autoprefixer-rails', '~> 6.0.3'
 gem 'devise', '~> 3.5.2'
 gem 'friendly_id', '~> 5.1.0'
 gem 'simple_form'

Answer 1

We've deployed bootstrap 4.0.0.alpha successfully on Heroku and use the following:

#app/assets/javascripts/application.coffee
#= require tether
#= require bootstrap

#app/assets/stylesheets/application.sass
@import bootstrap

We don't use the bootstrap gem, we use the direct implementation from rails-assets :

---

As a strong recommendation, you'd be much better pulling any "asset" gems directly through their repos using Rails Assets :

#Gemfile
source "https://rails-assets.org"

gem 'rails-assets-bootstrap', ">= 4.0.0.alpha.2"
gem 'rails-assets-tether'

Answer 2

You're probably going to want to stick with the @import method for your application.scss file. Check this blog post for more information:

https://blog.pivotal.io/labs/labs/structure-your-sass-files-with-import

Looks like the rails team also would suggest going down the @import path.