How to use compass with rails 3.1 - ruby-on-rails-3.1

I have searched and searched and all I could see was that to use compass with rails 3.1 was to just edit the Gemfile like so:
gem 'compass', :git => 'https://github.com/chriseppstein/compass.git', :branch => 'rails31'
gem 'sass-rails', "~> 3.1.0.rc"
Yes I understand that but what next? Every tutorial I saw said just that, use that certain fork. But I am still having trouble with using compass with rails 3.1.
I did this:
$ compass init rails . --syntax sass
directory ./app/stylesheets/
create ./config/compass.rb
create ./app/stylesheets/screen.sass
create ./app/stylesheets/print.sass
create ./app/stylesheets/ie.sass
And since 3.1 was using assets now, I just transferred all those files to 3.1. Also, I am using compass-960 plugin, so where do I require it? I tried adding a compass.rb with require 960 and require html5-boilerplate and I still keep getting errors:
Error compiling asset application.css:
NoMethodError: undefined method `Error' for Compass:Module
(in /Users/eumir/rails_apps/kiseki/app/assets/stylesheets/screen.sass)
NoMethodError (undefined method `Error' for Compass:Module
(in /Users/eumir/rails_apps/kiseki/app/assets/stylesheets/screen.sass)):
I tried doing compass compile and it gave me this:
$ compass compile
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.
As I said, I already edited my compass.rb so I am still stumped as to how to go about with this. Any help?

UPDATE: Seems like there is a better way !
Source: http://spin.atomicobject.com/2011/07/12/sass-sprockets-compass-with-rails-3-1/
UPDATE 2(dec 2, 2011): Chris Eppstein, creator of Compass posted this Github Gist of how to integrate Compass with Rails 3.1: https://gist.github.com/1184843
I now prefer this method over mine, as I noticed a great speed improvement at compilation time when using livereload.
MY METHOD:
(I now consider it deprecated, but maybe it can be useful in some cases, so here it is for reference:)
First, in your Gemfile, add:
gem "compass", "~> 0.12.alpha.0"
And don’t forget to execute a
bundle update
Then, in config/application.rb:
config.generators.stylesheet_engine = :sass
Rename application.css.scss to application.css.sass, or create it, and replace its contents by:
#import compass
#import _blueprint
(If you want to keep the new Rails 3.1 manifest code at the beginning of the stylesheet, you’ll have to replace the ‘/* */’ comments by the sass-syntax version ‘//’ at the beginning of each line)
Now, to test if compass and blueprint mixins work, add some code to the same file application.css.sass:
#import compass
#import _blueprint
body
background: black
+linear-gradient(color-stops(white, black))
+column(5)
Run your rails server with
bundle exec rails server
Load your app in a browser, and visit http://localhost:3000/assets/application.css
If everything went well, you should see the compiled code.
Source:
http://blog.pixarea.com/2011/07/using-compass-blueprint-semantic-and-sass-syntax-in-rails-3-1/

The solutions in the other answers are deprecated with the latest version of Compass, v0.12, which requires an adapter to work with a rails app. The Compass author, Chris Eppstein, has put installation instructions on github:
https://github.com/compass/compass-rails
This adapter supports rails versions 2.3 and greater

Peter Gumeson from the compass users groups pointed me to a fix for this:
https://groups.google.com/forum/#!msg/compass-users/mU5HBt8TCIg/2Rt7iSESTSAJ
Here's his message:
Hi gang. This github issue might help out.
https://github.com/sporkd/compass-html5-boilerplate/issues/19
I am pretty much running everything on edge right now. So my gemfile
looks something like this:
gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sass-rails', '~> 3.1.0.rc2'
gem 'haml', :git => 'git://github.com/nex3/haml.git'
gem 'haml-rails'
gem "compass", :git => "git://github.com/chriseppstein/compass.git", :tag => "0.12.alpha.0"
gem 'compass-html5', :git => 'git://github.com/sporkd/compass-html5.git'
I'm working on the rails generators right now, so it should not be too
far off. But this should at least get you going.
Peter
*changed branches as said by choonkeat

YOu can download the compass directory, dump it in vendor/assets/stylesheets so your directory structure is vendor/assets/stylesheets/compass Then from your main application stylesheets include the compass mixins ass required #include compass/reset;

Related

Repeating Error: undefined method `start_with?' for nil:NilClass

I've gotten this weird error message that keeps me from working on my application.
undefined method `start_with?' for nil:NilClass
with line 5 highlighted in my app/views/layouts/application.html.erb file:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
The error seems to come out of nowhere. The first time I got it I had attempted to load CarrierWave. I got through ReadMe but it didn't work so I tried to back out of the installation.
When I comment out this line the app loads but with no bootstrap formatting at all. I initially focused my search with CarrierWave, deleted and re-installed the gem, but was unsuccessful and found nothing really pointing me in the right direction. I spent days on this. Finally, I reached out to a mentor who pulled my code down from github and found no errors. The app worked fine for him. I pulled down a previous, known working commit, and it worked for me as well. So, although not solved I could continue working on my app (having to re-do some work). Now, the problem has reappeared while working on my app. Not CarrierWave this time, just normal editing. Without warning the application just stopped loading but with the same start_with? error message on my app/views/layouts/application.html.erb file.
I've spent a considerable amount of time searching for answers and a permanent fix on Stackoverflow.
Solutions that seemed to work for others, but HAVE NOT worked for me are:
1. Remove //= require_tree . from application.js, and
2. Downloading and installing node.js
Some posts support the thought that the idea that the issue is local and would only show up in dev, not prod. I'm only working in dev at the moment. While there's a lot of other info, I've struggled with this for days now and feel that every possible solution gets me further down a rabbit hole that is completely foreign to me. I am a newbie...about 3 months into my knowledge on Ruby. I'm really not even sure what code to add here because I can't seem to isolate the issue. I only know that formatting seems to be affected when I comment out line 5 (as above).
Trust me when I say I've searched quite a bit. I'm very hard headed, but optimistic I can find an answer if given the time but I'm stumped here and just want to move on with learning to create with Ruby/Rails.
My gem file is below. Perhaps I'm missing something very obvious.
ruby '2.2.0'
source 'https://rubygems.org'
group :production do
gem 'pg'
gem 'rails_12factor'
end
gem 'font-awesome-sass'
gem 'bootstrap-sass'
gem 'simple_form'
gem 'devise'
gem 'seed_dump'
gem 'rails', '4.2.0'
group :development do
gem 'sqlite3'
end
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
group :development, :test do
gem 'byebug'
gem 'web-console', '~> 2.0'
gem 'spring'
end
Application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
The only other info I can provide is that I've scaffolded my resources and used devise to create my User model.
Thanks. I'm in your debt if you can help me solve this. I am new, but I want to learn.
Thanks this helped me work out a bit more of whats going on. Seriously unhelpful error message.
Commenting out $icon-font-path in _variables.scss worked for me. If you have a look you will see that there is a [converter] comment that says:
If $bootstrap-sass-asset-helper if used, provide path relative to the
assets load path. This is because some asset helpers, such as
Sprockets, do not work with file-relative paths.
If you are not using the fonts just comment it out. If you need to use them set $bootstrap-sass-asset-helper to true and set the path as needed. That also worked for me.
It seems that the order is important here, the following order - if bootstrap-sprockets is defined before bootstrap - causes this error
#import "bootstrap-sprockets";
#import "bootstrap";
while this order seems to work
#import "bootstrap";
#import "bootstrap-sprockets";
I came across this same issue myself maybe my solution will help you out. Check your /app/assets/stylesheets/application.scss file for "bootstrap-sprockets". Commenting this out solved it for me.
Whether it's connected to the issue or not, uncommenting "bootstrap-sprockets", and changing the $icon-font-path and $icon-font-name to #icon-font-path and #icon-font-name (app/stylesheets/_variables.scss under Iconography) appeared to solve this and an additional issue I was having with glyphicons not displaying. Not sure exactly how but all appears to be working. The syntax errors in my controllers were likely coincidental. Although it wasn't the exact solution, #TheRealSeanReid pointed me in a direction that appears to have worked. Credit is deserved. Thanks #TheRealSeanReid.
I had this problem as well, but what was causing it was an incorrect value passed into an image-url() helper in a .scss file. We had background-image: image-url('./image.png'); instead of background-image: image-url('image.png');
In my case, the problem was actually that sprockets-rails was looking to load a non-existent path. This was happening because I passed a regex to the list of assets to precompile and sprocket-rails made a bad guess as to the asset's relative path. More information in this issue here:
https://github.com/rails/sprockets-rails/issues/269
bower-rails gem was causing it for me.
probable reason:
bower was attempting to load a non-existent path
just commented out the gem and its config files for now.
a precise probe to pin-pointing of the cause remains subject to available time. bower-rails is not so critical for the project right now.
I've just found what was wrong. The issue came with typescript compile.
Suppose that you have a function to give json response as following
const getSomething = () => {
return { a: 1, b: 2, c: 3}
}
And you might want to define variables like this
let something = getSomething()
let {a, b, c} = something
In my case, the above code made the issue in rails assets precompile for typescript, even though it's correct in syntax of it. But the following code does work properly
let {a, b, c} = getSomething()
I hope this would help someone who got this kind of issues.
Thanks

How to install and use Slim template engine with Middleman

I'm new to Middleman and ruby in general.
I've installed Ruby
I've installed Middleman and the gems to get it running.
I need to use slim instead of the default template system.
So I installed the Slim gem. Slim's website only says that I need to require 'slim' in order to get it to work.
The middleman website says I only need add the template engine to the config.rb file, but it gives no examples...
For someone with no ruby background, this is no help.
I looked for several config.rb on git and they all have:
require 'slim'
And
# Set slim-lang output style
Slim::Engine.set_default_options :pretty => true
# Set template languages
set :slim, :layout_engine => :slim
I added that to my config.rb file and created the layout.slim and the index.html.slim
When I refresh my local server I get:
Not Found
`/' not found.
I have middleman installed with Boilerplace. I'm not sure if there are more files that I need to change, but I can't find any good resources online, which is odd.
Could anyone give me some direction as to what I'm missing?
So here we go... after much reading and searching google for examples I think I figured it out.
To get Slim working with Middleman
Add gem "slim" to your project's gemfile
go to command line, in your project folder and gem install bundler
In the config.rb file add require 'slim'
Start the middleman server to test it
The middleman-slim project by yterajima is helpful in this regard.
Install is very easy.
$ gem install middleman
$ gem install middleman-slim
$ middleman init PROJECT_NAME --template slim
Bundler tip: you can also include multiple gems at once using Bundler.require. If you have gems in groups, you can include them as such: Bundler.require :group1, :group2 ...

Add the gem I'm developing to be loaded automatically by rubygems without build/install?

I'm developing a gem with Jeweler in a custom directory.
I want to be able to require the gem within any app (and also the executables files from $PATH), and without needing to build and install the gem each time I modify it.
I thought about 2 ways:
I make a symlink to $GEM_HOME/gems and $GEM_HOME/bin
I add the bin directory to $PATH and the lib directory to rubygems to be loaded.
But I bet there is a proper way to do this.
You can specify a local path in the gem command:
gem 'your-gem', '1.2.3', :path => 'path/to/your-gem'
Update: As #Nick points out in the comments,
This is specific to using bundler. In general, it's just require '/path/to/your-gem.
I'd like to add, however, that if you're using a custom-developed gem, bundle will probably make your life easier if you're not already using it. This is because with bundler, when you're done developing the gem (or at a stable/release point) you can load a gem directly from a github repository like this:
gem 'your-gem', :git => 'git#github.com:you/your-gem.git'
No need to mess around with your Gemfile
require 'bundler/setup' will put the right gem into your $LOAD_PATH and allow you to require it on the next line.
#!/usr/bin/env ruby
require 'bundler/setup'
require '<gem-name>'

rake assets:precompile not working (Rails 3.1.3 edition)

After review, this question has been asked many, many, many times. Yet I still don't grok why rake assets:precompile fails.
I can view the following results from my browser using local server (e.g. thin):
body{
#include background-image(image-url('my_image.png'));
background-repeat: repeat;
...
...
}
(NOTE: image-path doesn't seem to work at all and I'm using thoughtbot bourbon as SCSS lib)
Yet every time I run precompile I get the following (short trace):
rake aborted!
images/my_image.png isn't precompiled
(in /path/to/myapp/app/assets/stylesheets/application.css.scss)
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)
This post suggests that I change my production.rb file, which I did and it compiled my image and rake now complains that I have an undefined mixin 'border-radius'. Perhaps this was the next exception, but I am not so sure. And everything works locally.
Rails Guides (3.1.3) explicitly states setting the value to true
'uses more memory, performs poorer than the default and is not recommended'
So now I have two problems. Performance downgrade and my SCSS library now has undefined mixins.
I would like to solve the production deployment issue resulting from rake assets:precompile. My Gemfile asset group looks like this:
group :assets do
gem 'sass-rails', " ~> 3.1.0"
gem 'coffee-rails', "~> 3.1.0"
gem 'uglifier'
gem 'zurb-foundation'
gem 'bourbon'
end
If you go with the assets:precompile option, you should use #import statements in every stylesheet you use a mixin.
e.g.
Let's say you have a custom mixin in app/assets/stylesheets/partials/_mixins.css.scss that you use in a stylesheet, you should add
#import "partials/mixins";
to that stylesheet.
I know, is shouldn't be like that, but as for now, I haven't found any other way.
The image-path helper assumes the images part of the path so remove that (and the slash) and it should start working.

Bundler gem installed from github get installed in a different location

I am trying to install a gem from github like this:
gem 'omniauth', :git => "git://github.com/intridea/omniauth.git", :require => "omniauth"
The problem is that the gem is not actually being loaded. The ruby objects are not there.
So, bundle show omniauth shows me: Users/felipe/.rvm/gems/ruby-1.9.2-p136/bundler/gems/omniauth-5972c94792cf
The problem is that the gem is being installed to a different location from the regular ones. I expected it to be `/Users/felipe/.rvm/gems/ruby-1.9.2-p136/gems/``
Any idea on how to fix this?
I think you're missing these two lines:
require "rubygems"
require "bundler/setup"
as you can see in Bundler's source code, "bundler/setup" is going to put gems managed by Bundler in the Ruby's load path:
https://github.com/carlhuda/bundler/blob/1-0-stable/lib/bundler/setup.rb#L22
Hope this helps :)
try changing the bundler line to.
gem 'omniauth', :git => "git://github.com/intridea/omniauth.git", :require => 'oa-oauth'
The problem is that your :require property was pointing to the wrong file to load. It is not always the same name as the library, by the way, when both lib name and require are the same you don't need to specify it, only when they differs.

Resources