I recently upgraded to rails 3.1 and also installed the Bourbon gem in my rails 3.1 app. Added this to my gemfile: gem 'bourbon' and ran $ bundle install but when in my application.css.scss I add the #import "bourbon"; line, i get the following error:
File to import not found or unreadable: bourbon.
Load path: Sass::Rails::Importer ...
here is my application.css.scss file
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*/
#import "bourbon";
#import "scaffold.css.scss";
.hidden{
display:none;
}
any idea how to load Boubon? what am I doing wrong?
I am guessing there need to be some files that need to be generated for rails to access bourbon library, no?
Any help or clues will be much appreciated
alik, try specifying the gem version number in your gemfile. https://rubygems.org/gems/bourbon
gem "bourbon", "~> 0.2.1"
rake bourbon:install will not help you on rails 3.1+
Related
I am trying to import/activate bootstrap in my Ruby on Rails application. I have added the#import "bootstrap-sprockets"; followed by
#import "bootstrap"; lines to my application.css.scss file and saved it. I also added gem 'bootstrap-sass', '3.3.1' to my Gemfile. I then restarted my server. When I launch the app from my browser, it doesn't appear that the bootstrap sass/css was applied. I can tell because the font never changed and the bootstrap navbar I added don't look correct. I have tried closing out my browser and starting over and trying to launch the link from a different browser, but it doesn't help. Any suggestions?
Inside your gem file:
gem 'bootstrap-sass'
Inside your console
bundle install
app > assets > stylesheets > application.css
#import "bootstrap-sprockets";
#import "bootstrap";
Finally, rename the file from application.css to application.css.scss and restart your server. (Don't forget to add the JavaScript too.)
Simply add bootstrap .css files in assets and same goes for .js files. It should work then without installing gems. It is the best option as you can update your files with new versions whenever you want.
Is it possible to import a stylesheet from a rails-assets.org gem using scss's import instead of sprocket's require? For example:
Given this Gemfile:
source 'https://rails-assets.org'
gem "rails-assets-RRSSB"
Using a sprockets stylesheet, normally you'd use a require in application.css (working):
*= require RRSSB/scss/rrssb
However, I'm using SCSS and would like to use import in application.css.scss (not working):
#import "RRSSB/scss/rrssb";
Go to your rvm gem directory (rvm gemdir) and look for the gem rails-assets pulled (/gems/rails-assets-YOUR_GEM-VERSION).
In the app/assets/stylesheets directory find your file.
Import/require the file with the path relative to app/assets/stylesheets.
The same goes for javascripts (in app/assets/javascripts).
This worked for me with rails-assets-bootstrap-sass-official, the file I was trying to import was bootstrap-sporckets and it was (including all other files) under app/assets/stylesheets/bootstrap-sass-official so my import was:
#import "bootstrap-sass-official/bootstrap-sprockets"
I am getting the following error. According to my R&D i believe it is producing because of bootstrap-sass but how can i resolve it I have tried very hard but still unable to get something.
ruby -v = 1.9.3
rails = 3.2.2
GemFile
"bootstrap-sass", "~> 2.0.0" # this is out of assets group
ActionView::Template::Error (File to import not found or unreadable: bootstrap.
Load paths:
/var/www/eventdid
/var/www/eventdid/vendor/bundle/ruby/1.9.1/gems/activeadmin-0.4.4/app/assets/stylesheets
/var/www/eventdid/vendor/bundle/ruby/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets
(in /var/www/eventdid/app/assets/stylesheets/site.css.scss)):
I have been digging my head into this issue from hours and hours. Looking forward help from you guys.
Thanks
If you are not using pre-compiled assets you should move your
gem 'sass-rails'
also out of your assets group.
Also worth checking, you should use scss in your application.css.scss
#import "twitter/bootstrap";
#import "twitter/bootstrap-responsive";
I'm trying to use the bootstrap_form ~> 2.0.1 gem (see https://github.com/bootstrap-ruby/rails-bootstrap-forms) but it's giving me fits. I've installed is as per the instructions on their github page, adding it to my Gemfile:
gem 'bootstrap_form', '~> 2.0.1'
I ran bundle install. I then added it to my application.css.scss file:
*= require_self
*= require rails_bootstrap_forms
*= require_tree .
But, when I try to run my app I get:
couldn't find file 'rails_bootstrap_forms' (in /path/to/my/app/assets/stylesheets/application.css.scss:12)
I'm obviously missing something. I checked lib/assets/ and vendor/assets/stylesheets/ but there's nothing there. Likewise, there's nothing in app/assets/stylesheets/.
What the fudge?
I had some trouble with this, partly (I think) because they renamed the gem. What seemed to make the difference for me was to have bundle grab the latest gem from github, by putting this into my Gemfile:
gem 'bootstrap_form', github: 'bootstrap-ruby/rails-bootstrap-forms'
I use bootstrap-sass, so I didn't want to mess around with application.css, so I made sure the following import statements were in application.css.scss, like this:
#import "bootstrap";
#import 'rails_bootstrap_forms';
It's also quite important to remember to restart the server after making these changes!
You have got to create the file rails_bootstrap_form.css in app/assets/stylesheets
.rails-bootstrap-forms-date-select,
.rails-bootstrap-forms-time-select,
.rails-bootstrap-forms-datetime-select {
select {
display: inline-block;
width: auto;
}
}
.rails-bootstrap-forms-error-summary {
margin-top: 10px;
}
I had this problem and found that I'd mistyped the Gemfile entry as bootstrap-form. I corrected it to bootstrap_form and all was well.
Have you installed Bootstrap? Looks like that is a requirement of bootstrap_form, but it's not included as a dependency in the gem which means you need to manually install Bootstrap.
One popular way to do this is with the twitter-bootstrap-rails gem. The simplest way to install this is to include gem "twitter-bootstrap-rails" in your gemfile, and then run
$ bundle install
followed by
rails generate bootstrap:install static which should add the required CSS files to your assets folder.
I was getting the same error so I took out *= require rails_bootstrap_forms from application.css.scss and was able to compile and deploy without any errors.
Despite SO's admonishment not to respond to other answers I'm going to enhance Thomas Geider's answer above by explaining why you need to create a rails_bootstrap_forms.css file in app/assets/stylesheets.
If you look in the rails-bootstrap-forms Github you'll notice they have a rails_bootstrap_forms.css file. The README doesn't tell you this but it follows that this css file needs to be in /app/assets/stylesheets.
Here's the file:
https://github.com/bootstrap-ruby/rails-bootstrap-forms/blob/master/app/assets/stylesheets/rails_bootstrap_forms.css
I create a new rails project,and add
gem 'bootstrap-sass'
to my Gemfile, then I run bundle install and every things going good. then I add:
/*
*= require bootstrap
*/
in my application.css file, and I write a test,but it doesn't.
and I also try add`#import "bootstrap"; in my hello.css.scss file .but it also doesn't work.
Rollen,
You seem to be mostly there. Sass is in Rails 3.1 by default so you won't need to do anything specific for that. After you add the gem to your Gemfile and do a bundle install your issue is in the application.css file. Typically when using Sass I'd just suggest that you remove the manifest code (all the commenting at the top) from the application.css and rename the application.css to application.css.scss (removing Sprockets from the CSS file). Then add:
#import 'bootstrap'
to the very top of it. That should solve it for you. You'll need to manually add each CSS file you'll want to load into the application.css.scss file since sprockets is gone, but that's typically a good idea anyway since load order in CSS is important for the cascade.
If you want to add the JavaScript features to the framework (which you likely will want to) you'll also want to add
//= require bootstrap
Just above the call to //= require_tree . within app/assets/javascripts/application.js.
Probably a little late to the party, but just in case anyone else stumbles across the question...
This was a small gotcha I Solved by adding #import "bootstrap"; to the top of my application.css file, the renamed the file to application.css.scss
Hope this helps.
https://github.com/rails/sass-rails needs to be there in your Gemfile.
gem 'sass-rails', '~> 3.1'
gem 'bootstrap-sass', '~> 2.0.1'
Remove all the comments at the top of the application.css and rename application.css to either application.sass or application.css.scss depending on how you want to do your css'ing
Then add:
#import 'bootstrap'
This should allow you to start using bootstrap, providing you have indeed included the bootstrap-sass gem correctly and ran bundle install afterwards.