Bootstrap not working after Rails migration to 4.1 - ruby-on-rails

I have a working Rails 4.0 + Bootstrap 2.3 application. Now I want to update to Rails 4.1.
After updating the gems and starting the server, I receive this message:
Sass::SyntaxError - File to import not found or unreadable: bootstrap-responsive.
It point to a line in bootstrap_and_overrides.css.scss where I have this:
#import "bootstrap";
#import "bootstrap-responsive";
Both files are in the assets/stylesheets folder. When I remove the last import, the application starts, but I miss a lot of styling. What is going wrong here, any ideas?

I made 2 mistakes with this: first I did a bundle update instead of bundle update rails, so that all gems where updated, also the bootstrap and sass related gems. The second error was that I didn't have specific version numbers for the bootstrap and sass related gems in my Gemfile.
The solution was simple: remove the branch, create a new one, check Gemfile.lock for the current versions of all bootstrap and sass related gems and add these to Gemfile. Then do a bundle update rails and sit back and enjoy!

Related

Issues with foundation-rails gem

I've generated a brand new rails app. I am using ruby version 2.3.3 and rails version 5.1.0 rc. Following the instructions on github:
1) I've added the foundation-rails gem to the gemfile
2) I've run the bundle install command
3) Run the rails g foundation:install command
4) Added the following import to my application.scss file:
#import "foundation_and_overrides";
5) Added the following statement to my application.js file:
//= require foundation
and the following statement to the my application.js file which is automatically generated by the install process:
$(function(){ $(document).foundation(); });
6) After generating a simple home controller with the index action to start building the application I run the server and I get the following error:
Any help ? I'm trying and trying. Cannot sort out the issue.
I don't know which foundation gem you are using but I would suggest to fetch this kind of gems from rails-assets.org
You can check the below url for the installation and usage of zurb-foundation v6 gem.
https://rails-assets.org/#/components/zurb--foundation-sites
I hope it helps.

Ran a bundle install, bootstrap updated, now I'm getting routing errors

I was just fiddling around with some things and happened to run bundle install on my ruby on rails app. I noticed that bootstrap updated from 3.1.1 to 3.2.0 and now when I go to generate certain views, I get this error:
ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap/glyphicons-halflings-regular.ttf"):
Didn't happen until this gem update. Any suggestions? I've tried explicitly using 3.1.1 in the Gemfile and running bundle again, but this doesn't help. It looks just like a simple routing issue, but idk why this would have only changed during the gem update.
My problem was with the order I was importing bootstrap in my application.css.scss file. Make sure the order goes:
#import "bootstrap-sprockets";
#import "bootstrap";
For anyone who else can't get an answer on this, I manually changed this file:
/home//.rvm/gems/ruby-2.1.1/gems/bootstrap-sass-3.2.0.2/assets/stylesheets/bootstrap/_glyphicons.scss and took out the $icon_path or whatever it was and replaced it with "../assets/bootstrap/
Fixed the problem thereafter.
I had the same problem like you. After some research these are the most important things i found out:
1) Since bootstrap-sass version 3.2.0 the asset directory moved from vendor/assets to assets/
source: Issue with upgrade to bootstrap-sass 3.2.0
2) The font files from customizer are probably corrupted and should be downloaded directly from the Bootstrap homepage.
source: Bootstrap 3 Glyphicons not working
As you already said; change the version back to 3.1.1.1 should do the trick. I uninstalled the gem via:
gem uninstall bootstrap-sass
Then I changed the version defined in the gemfile and reinstalled it with
gem install bootstrap-sass
bundle update
This might help people facing the same issue.

is twitter-bootstrap-rails compatible with rails 4?

Is twitter-bootstrap-rails compatible with rails 4 and ruby 2.0. I was having tons of trouble installing this on my rails app after going through two railscast and the readme on its github page. Sorry I couldn't find a straight forward answer both in the repo's issues and from googling online.
on the repo page it says
Twitter Bootstrap for Rails 3.1 Asset Pipeline
To get bootstrap in Rail 4.
Add gem 'bootstrap-sass' to your Gemfile.
and then add #import "bootstrap-sprockets";
and #import "bootstrap";
to the top of your application.scss file. Don't forget to run bundle install.

rails bootstrap-sass do i need to update bootstrap files?

I am using ROR with bootstrap-sass gem.
It is quite strange, but I can't use some of stylings that are listed here:
http://twitter.github.com/bootstrap/components.html#labels-badges
I thought it is because of my not actual bootstrap-sass gem - it was 2.0. So I updated this gem to 2.2.2.0, it installed well, but it didn't help.
As I checked the stylesheet files in source of my page, on top of localhost/assets/custom.css?body=1, there is header:
/*
* Bootstrap 2.0.0
*
(...)
So do I need to update bootstrap files separately? And if, where I can find them?
EDIT
I made some actions:
-downloaded bootstrap by hand and put it to vendor/assets/stylesheets/bootstrap (I created the bootstrap folder)
-changed import "bootstrap" to import "bootstrap/bootstrap"
it worked, but I had objections if it is a good practise, so I made:
-gem clean
-gem update
-bundle install
-deleted the vendor/assets/stylesheets/bootstrap - everything what I put
-changed back to import "bootstrap"
and... it seems to work.
You might try to precompile in development environment.
bundle exec rake assets:precompile RAILS_ENV=development
But I am really not sure because I use twitter-bootstrap-rails gem. It works wonderfully.
you just need to clean up the previous gems although it is not recommended if you have multiple projects with different versions.
this blog post might help ...cleaning-previous-versions-for-gem-like.html
I made some actions: -downloaded bootstrap by hand and put it to vendor/assets/stylesheets/bootstrap (I created the bootstrap folder) -changed import "bootstrap" to import "bootstrap/bootstrap"
it worked, but I had objections if it is a good practise, so I made: -gem clean -gem update -bundle install -deleted the vendor/assets/stylesheets/bootstrap - everything what I put -changed back to import "bootstrap" and... it seems to work.

Rails 3.1 Compass and Sprockets. Confused

I am generally confused about Rails 3.2, Sprockets, and Compass.
At the top of this article, it says *= require directives, are no longer needed using Sass-Rails, just use #import instead. The Sass-Rails Github talks about a little about glob #import feature, but doesn't talk at all about #import being the new *= require. Which one or combo :(
do I use?
Having coderay.css.sass in vendor/assets/stylesheets and using #import in application.css.sass will import my_coderay.css.sass?
I don't know because I'm using Compass Mixins in my_coderay.css.sass (thus putting a #import "compass/css3" at the top of that file) and I'm getting an error:
"File to import not found or unreadable: compass"
In this article it talks about configuring Rail's Sass engine to know about the assets path. But I thought Sass-Rails already teaches #import where asset path is?
Also when I try to include the 31 branch of compass...
gem 'compass', :git => 'git://github.com/chriseppstein/compass.git', :branch => 'rails31'
I get errors...
Using compass (0.12.0.alpha.0.22e2458) from git://github.com/chriseppstein/compass.git (at rails31) /Users/george.norris/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:365:in `initialize': No such file or directory - /Users/george.norris/.rvm/gems/ruby-1.9.2-p180/bundler/gems/gems/compass-0.12.0.alpha.0.22e2458/bin/compass (Errno::ENOENT)
And finally, if I take coderay.css.sass out of vendor/assets and put it in app/assets I don't get the above error. But I getting it's spitting out errors in public/application.css.css (.css.css ???)
Syntax error: File to import not found or unreadable: base.
Load paths:
Compass::SpriteImporter
/Users/geonorr/Sites/quasar/public/stylesheets/sass
/Users/geonorr/Sites/quasar/app/assets/stylesheets
/Users/geonorr/.rvm/gems/ruby-1.9.2-p180/gems/compass-0.11.5/frameworks/blueprint/stylesheets
/Users/geonorr/.rvm/gems/ruby-1.9.2-p180/gems/compass-0.11.5/frameworks/compass/stylesheets
on line 3 of /Users/geonorr/Sites/quasar/app/
I am using Rails (3.1.0), Sass (3.1.7), Sass-Rails (3.1.0), Compass (0.11.5)
Thanks for the response. Feel like I am getting closer...
Including Compass Master Branch and getting this error:
gem 'compass', :git => 'git://github.com/chriseppstein/compass', :branch => 'master'
Using compass (0.12.alpha.0.d03d529) from git://github.com/chriseppstein/compass (at master) /Users/gnee/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:365:in initialize': No such file or directory - /Users/gnee/.rvm/gems/ruby-1.9.2-p180/bundler/gems/gems/compass-0.12.alpha.0.d03d529/bin/compass (Errno::ENOENT)
from /Users/gnee/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:365:inopen'
from /Users/gnee/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:365:in shebang'
from /Users/gnee/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:456:inapp_script_text'
*= require comments can be seen as a hacky workaround from the perspective of Sass, because Sass has a dedicated language feature for that: the #import directive. #import tells Sprockets what to do. When you are migrating from a Rails 3.0 project, leave all #import statements as they are. At the moment, the only gotcha is "globbing": How to tell Rails/Sprockets to regard also other Sass files than application.css.s(ac)ss.
Here is the latest Compass installation guide for Rails 3.1. It also tackles the globbing problem.
As it is said in the Rails Guide, app/assets, lib/assets or vendor/assets directories in your app as well as in your gems/engines are included in Rails.application.config.assets.paths. I verified that +opacity(.5) from the compass/css3 library works as expected if you install compass properly. Which leads us to the next point:
The rails31 branch is merged into master now and version 0.12.alpha has been released that should support Rails 3.1. However, this is version is not yet without bugs. So I recommend to rely on the newest master revision:
gem 'compass', git: 'git://github.com/chriseppstein/compass', branch: 'master'
The only bug I am encountering at the moment is a "undefined method nil.[]" Exception when trying to compile statements that create sprites. See this issue. A workaround for that is to set sass_options = {quite: true} in your config/compass.rb
Further note: I do not have Sass in my Gemfile any more. I think you can remove that dependency when relying on sass-rails.

Resources