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

Question

I am suddenly getting this error in development and in production on deployment.

custom.css.scss

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


        

Answer 1

Make sure you don't have

gem 'bootstrap'  # Remove this line
gem 'bootstrap-sass'

It should just be

gem 'bootstrap-sass'

Answer 2

I was also facing the similar error in development environment:

Error Image

I solved this problem by-

1. In my gemfile, I added them -

   gem 'bootstrap', '~> 4.2.1'

   gem 'jquery-rails'

2. In application.js file,add these -

   //= require jquery3

   //= require popper

   //= require bootstrap-sprockets

3. In the file with .scss extension, simply add -

   @import "bootstrap";

   After that, just run bundle install

Answer 3

If you get this message when running integration tests, make sure that your asset gems are included in the test group.

For example, change:

group :assets do gem 'sass-rails', '~> 5.0.3' gem 'uglifier', '>= 1.3.0' end

To:

group :assets, :test do gem 'sass-rails', '~> 5.0.3' gem 'uglifier', '>= 1.3.0' end

Answer 4

make sure you run the following commands after adding this gem to your Gemfile put this inside your Gemfile

    gem "bootstrap-sprockets", "~>3.3"
    gem "bootstrap"

now stop your server and run the following:

    bundle install
    rails server

to restart your server. Refresh your browser and you should see changes reflect immediately. In production you may have to run this command to precompile your assets:

    bundle exec bin/rake assets:precompile

It worked for me. Hope this was helpful.

Answer 5

I solved it in following steps:

1. List item
2. copying the "bootstrap.css" in my "app/assets/stylesheets/ (it was missing)
3. gem install autoprefixer-rails (also modify Gemfile)
4. gem install sprockets (also modify Gemfile)
5. bundle install
6. RESTART server (not just refreshing page)

Answer 6

I had the same problem

sass::syntaxerror: file to import not found or unreadable: config/variables.

, I opened a new css file (I called it custom.css) then copied all the css to the file. On application.css I removed the

@import "config/variables" plus all the other @imports

This worked for me, I hope it does work for you too!