I'm just starting with ruby on rails and one of the first things I tried to do was install the gems compass and susy. After figuring out that I needed to include them in the gemfile (I'm using RubyMine and thought it would do it for me), I still got a missing "Could not find", "susy" error when I tried to import susy into one of my css.scss files.
I have ruby version 1.9.3 (194)
and ruby gems version 1.8.23
Any help on which gems (and versions) I need in my bundle, how to make sure they get in the project bundle, is greatly appreciated.
I'm on rails 3.2.7 and use Susy (and Compass) like this.
##### Gemfile:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'compass-rails'
gem 'susy', git: "git://github.com/ericam/susy.git"
gem 'uglifier', '>= 1.0.3'
end
Then I have several different css files.
application.css.scss, screen.css.scss and _base.scss.css.
application.css.scss
#### application.css.scss:
#import "screen";
# Here you import your normal .scss files as well, like:
# #import "products";
screen.css.scss
#### screen.css.scss
// ---------------------------------------------------------------------------
// Imports
#import "compass";
#import "base";
/* -------------------------------------------------------------------------*/
/* Layout */
// Here you can add layout styling or whatever... :)
_base.css.scss
// ---------------------------------------------------------------------------
// Imports
#import "susy";
// ---------------------------------------------------------------------------
// Basic Grid
$total-columns : 12;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : $gutter-width;
$show-grid-backgrounds : true;
And that's it. Now you can use Susy in all your scss files that you import in application.css.scss.
I hope it helps you to get started.
Related
I am using Rails 4.2.5. And I want to use susy.
I've installed some gems required,
gem 'susy'
gem 'compass-rails', '~> 2.0.0'
gem 'compass-susy-plugin'
gem 'sass-rails', '~> 5.0.0'
And in config/application.rb, I've added
require 'susy'
In application.scss
#import "susy";
But I failed to import susy in my scss file. When I give the command sass --watch application.scss:application.css, it shows error application.scss (Line 1: File to import not found or unreadable: susy.).
I may found the answer myself.
Actually, there's no need to convert scss file to css file since the gems we've installed will do that job for us.
By the way, upgrading the compass-rails gem to master may avoid some problem. See this issue.
I am trying to set up Rails app with Twitter Bootstrap (the gem twitter-bootstrap-rails), but I still cannot get over the error
File to import not found or unreadable: twitter/bootstrap.
I found this issue on official Github of the gem, but none of solution from there have worked for me.
Here's my setup:
Gemfile
gem "twitter-bootstrap-rails"
gem 'font-awesome-rails'
gem 'sass-rails', '~> 3.2.3'
group :assets do
#gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
application.css
*= require_self
*= require bootstrap_and_overrides
*= require font-awesome
*= require_tree .
bootstrap_and_overrides.css.sass
#import "twitter/bootstrap";
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// Font Awesome
#import "fontawesome";
// Glyphicons
#import "twitter/bootstrap/sprites.scss";
What am I missing for correct set up?
Thanks
we had the same problem, i just restarted the rails server and it worked
If you already attempted to shut down the server and restart it, then your problem may be the cached css file that is generated from your sass file. The reason for this may be some varient of live reload which pre-renders several of the scss/haml type files. If that isn't the case then
Read the error message and determine the scss file that is causing the error.
Locate the css file that is generated along the sass file, (i.e. custom.css.scss would generate custom.css).
Delete that file, refresh the page and if this files delete the entire cache found under assets/stylesheets and temp/cache)
For some reason I had to explicitly require the gem to get it working. As suggested in this github issue comment to fix a similar error with bootstrap-sass, it's likely the gem is not loaded automatically. Add require "twitter-bootstrap-rails to e.g config/application.rb file to explicitly require it.
Downgrade the bootstrap-sass gem to v2.3.2 like so:
gem 'bootstrap-sass', '2.3.2'
I had done a bundle upgrade which upgraded the bootstrap gem. This (version downgrade) fixed the problem for me.
The way how I made it work was simply changing the Twitter Bootstrap gem - I used the bootstrap-sass gem, where is set up everything as is described on the Github page and I didn't find any problem with.
Did you try to compile the assets ?
rake assets:precompile
I solved this issue by adding gem 'bootstrap-sass', '3.0.2.1' in my Gemfile (per the recent docs). Make sure you run bundle install afterwards.
I found this response as I was searching for a problem with Michael Hartl's RailsTutorial.org program. I had inadvertently allowed the sprockets gem to be upgraded to 2.12.1 (it was locked in Gemfile.lock). Force downgrading it to 2.11.0 fixed this error and allowed the older bootstrap-sass (2.3.2.0) gem to work correctly.
Back to learning!!
Nothing here worked for me. I gave up, downloaded Bootstrap itself, put the files in my assets, and included them in my CSS. That fixed it.
add following gem in asset group and bundle install
gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails"
Try adding
gem 'sass-rails'
to your Gemfile
I try to use bootswatch-rails, but it doesn't work well, for example, button doesn't appear right, not like on the bootwatch site, that show.
I put bootstrap-sass and bootswatch in my gemfile and bundle install
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'bootswatch-rails', '>=0.2.0'
gem 'uglifier', '>= 1.0.3'
end
gem 'bootstrap-sass', '>= 2.1.0.0'
and in my bootstrap_and_overrides.css.scss file looks like this
// First import journal variables
#import "bootswatch/cerulean/variables";
// Then bootstrap itself
#import "bootstrap";
// Responsive styles go here in case you want them
#import "bootstrap-responsive";
// And finally bootswatch style itself
#import "bootswatch/cerulean/bootswatch";
I really don't know what I do wrong.
do you have any other css files being imported that you aren't taking into consideration such as scaffold.css (when you generate a resource via the scaffold command)?
I'm trying to install the bootstrap-sass gem on my Rails 3.2 app, but encounter this error when I call compass install bootstrap :
No such framework: "bootstrap"
I have the gem installed in my Gemfile:
gem 'compass', '~> 0.12.2'
group :assets do
...
gem 'sass-rails', '~> 3.2.4'
gem 'compass-rails', '~> 1.0.3'
gem 'bootstrap-sass', '~> 2.1.1.0'
end
I've put in the import statement to my application.css.scss file:
#import "bootstrap";
I've required bootstrap in my application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
...
and I've required bootstrap-sass in my config.ru file:
require 'bootstrap-sass'
require ::File.expand_path('../config/environment', __FILE__)
run MYAPP::Application
Anyone have any idea what the problem could be, or encountered the same problem?
Here's the git for bootstrap-sass: https://github.com/thomas-mcdonald/bootstrap-sass.git
The bootstrap-sass is not well documented, it take me some time to make a workaround.
Forget about the compass.
gemfile:
gem 'bootstrap-sass', '~> 2.1.1.0'
gem 'bootswatch-rails'
use bootswatch-rails gem can quickly change your themes
in assets/stylessheets, create a your_own_sytlesheet.css.scss
#import "bootswatch/cerulean/variables";
// Then bootstrap itself
#import "bootstrap";
// Bootstrap body padding for fixed navbar
body { padding-top: 60px; }
// Responsive styles go here in case you want them
#import "bootstrap-responsive";
// And finally bootswatch style itself
#import "bootswatch/cerulean/bootswatch";
// Whatever application styles you have go last
//#import "base";
you can change themes easily by replacing cerulean with other names.
At least it works for me now.
Figured it out...
So to get the install to work, I had to call bundle exec compass install bootstrap. This executes compass install bootstrap in the context of the bundle, which includes all the gems. However, this gave rise to some more problems.
The install wrote several new bootstrap javascript files to my assets/javascripts directory. In Rails 3.2, these are automatically loaded by the asset pipeline, but in the wrong order, so in my browser console, I was getting error messages for a missing constructor and calling 'popover' on an undefined object. After digging around, the solution was just to delete all the newly generated javascript files, as they are already included by having //= require bootstrap in application.js.
You don't need gem for this. Just copy bootstrap libs (scss & js files) to your assets.
Make sure that no more text in your application.css.scss before #import 'bootstrap';
And don't need edit config.ru file
Also look into you page code. What is displaying in application.css ?
Have you user in your controller inheritance of ApplicationController?
In your gem file try keeping bootstrap gem outside asset.
source 'https://rubygems.org'
gem 'rails', '3.2.8'
gem 'bootstrap-sass', '2.1.1'
And then run command
$ bundle install.
Then check and ensure that bootstrap is installed using command.
$bundle list
I'm trying to import a compass extension in my current sass file.
# /app/assets/stylesheets/application/base.css.sass
#import "compass/css3/border-radius"
Problem is that I'm getting the following error when refreshing the page.
Completed 500 Internal Server Error in 161ms
ActionView::Template::Error (File to import not found or unreadable: compass/css3/border-radius.
Load path: Sass::Rails::Importer(/Users/user/Sites/site/app/assets/stylesheets/application/base.css.sass)
(in /Users/user/Sites/site/app/assets/stylesheets/application/base.css.sass)):
For some reason is its not getting the path to compass extensions. In Gemfile I have
gem 'compass'
gem 'sass-rails', '~> 3.2.3'
gem 'haml-rails'
Hmmm a few things:
1) I believe compass-rails is the most up to date compass gem, try this in your gemfile:
group :assets do
gem 'sass-rails'
gem 'compass-rails'
# other gems like uglifier and coffee go here as well
end
2) I'm using rounded corners in my project and have no trouble, if the above doesn't fix it, try importing all of the css3 mixins.
#import "compass/css3";
Any luck with those?