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.
Related
I get the following error issued by Phusion when loading a web page:
There was an error while trying to load the gem 'compass-rails'.
Gem Load Error is: undefined method `has?' for Sass::Util:Module
Did you mean? hash
Hash
Backtrace for gem load error is:
/Volumes/Data/htdocs/zetcho/vendor/bundle/gems/compass-0.12.2/lib/compass/sass_extensions/functions/urls.rb:5:in `has?'
The code at the indicated location is:
module Compass::SassExtensions::Functions::Urls
def self.has?(base, instance_method)
Sass::Util.has?(:instance_method, base, instance_method)
end
My gem file contains:
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.2'
# Use mysql as the database for Active Record
gem 'mysql2', '~> 0.3.18'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Compass for stylesheets
gem 'compass-rails'
# Use the Compass extension susy
gem "sprockets"
gem 'susy'
I've just created the Ruby on Rails site using Rails 5.1.2 and ruby 2.3.1. I have a much older site that works fine with the gem. Did I miss a step in the overall install or is this a bug with compass-rails?
I got the same error when I tried to add a controller:
rails generate controller home index
After more digging around, I found a similar problem. I fixed this one by changing the gem file to:
gem 'compass-rails', github: 'Compass/compass-rails'
Then:
rm gemfile.lock
bundle
It seems that the issue can be found in compass-rails 2.0.0. The version 3.0.2 seems to fix this issues. So a possible solution is :
# Gemfile
gem 'compass-rails', '~> 3.0.2'
Then bundle update compass-rails
This avoids targeting the compass-rails git master branch in favor of an actual release.
I came here having the same issue with a grunt compiling issue trying to use Compass/Sass, if this might help someone, my issue was caused because I had an updated version of Sass (sass-3.7.4) that was higher that the max-version compatible with compass, I uninstalled sass:
gem uninstall sass
Which in turn uninstalled compass, and reinstalled compass letting it choose the right version, and problem solved.
gem install compass
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'm running a Rails 4 app and trying to get compass and susy running. I'm getting the following error:
File to import not found or unreadable: susy.
My gemfile group:
group :assets do
gem 'sass-rails', '~> 4.0.0.beta1'
gem 'compass-rails'
gem 'susy'
...
end
The only CSS line I have (_base.sass)
#import susy
I've run Bundle Install, and my app is using:
Using compass-rails (1.0.3)
Using susy (1.0.7)
Completely lost. I don't have a config.rb file for compass, but from what I gather it isn't necessary after like Rails 3.1/3.2. Any ideas?
You can found the solution in the compass-rails gem documentation:
You have to add the gem compass-susy-plugin instead of susy, like this:
# Gemfile
…
gem 'compass-rails'
gem 'compass-susy-plugin'
…
If you are using Rails 4 do not use group :asset, it has been removed, simply add the previous lines to the Gemfile.
Then run:
$ bundle
$ bundle exec compass install susy
These previous lines will generate files that require susy for you.
And finally add this to your application.rb:
# config/application.rb
config.compass.require "susy"
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.
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?