NameError - uninitialized constant Sass::Engine:

Question

I am getting NameError - uninitialized constant Sass::Engine: when I run my sinatra app with sass gem. installed ruby version 2.3.1 with rbenv and also installed sinatra, sass gem.

require 'sinatra'
require 'slim'
require 'sass'  # required sass
require 'sinatra/reloader' if development?

get '/styles.css' do
    scss :styles #does not generate styles.css, styles.scss file is in /views folder
end

get '/' do
    slim :home
end

get '/about' do
    @title = "All About This Website"
    slim :about
end

get '/contact' do
     slim :contact #, :layout => :special
end

not_found do
   slim :not_found
end

get '/fake_error' do
   status 500
   "There's nothing wrong, really :P"
end

Full error:

NameError - uninitialized constant Sass::Engine: /home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt/sass.rb:13:in prepare' /home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt/template.rb:92:in initialize' /home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:862:in new' /home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:862:in block in compile_template' /home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt.rb:104:in block in fetch' /home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt.rb:103:in fetch' /home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt.rb:103:in fetch' /home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:841:in compile_template' /home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:822:in render' /home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:687:in scss' main.rb:7:in `block in '

What I am doing wrong?

and here is styles.scss:

$red: #903;
$black: #444;
$white: #fff;
$main-font: Helvetica, Arial, sans-serif;

body {
  font-family: $main-font;
}

h1 {
  color: $red;
  font: 32px/1 $main-font;
}

header h1 {
  font-size: 40px;
  line-height: 80px;
  background: transparent url(/images/logo.png) 0 0 no-repeat;
  padding-left: 84px;
}

@mixin tabs ($background: blue, $color: yellow) {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: $background;
    overflow: hidden;
  }

  li {
    float: left;
  }

  a {
    text-decoration: none;
    display: block;
    padding: 8px;
    background: $background;
    color: $color;
    &:hover {
      background: darken($background, 20%);
    }
  }
}

nav {
  @@include tabs($background: $black, $color: $white);
  font-weight: bold;
}

p {
  font: 13px/1.4 $main-font;
}

Answer 1

Perform below steps :

1. Add any of this gem into your gem file gem 'bootstrap-sass' or gem 'sass-rails'

2. Then install bundle using bundle OR bundle install command

Answer 2

Make sure you have in your gemfile:

gem 'sass'
gem 'sass-rails'

If not, add it. Don't forget to run bundle install.

Answer 3

If you are using the asset-pipeline with sinatra, then this might help. For those using rails this could help.

In my scenario, (running rails 3.2.22.2) on one machine my app worked. On another machine I cloned the repo and ran into the uninitialized constant Sass::Engine error.

Moving gem sass-rails did not work for me

I moved gem 'sass-rails' out of the group :assets do block. This did not work for me.

Solution for me:

rake assets:clean removes all compiled assets.

Next time you run rake rails s, your assets will be recompiled.
If not, you can run rake assets:precompile to compile all your assets.
Or if you are deploying via capistrano, the deploy.rb will run "deploy:assets:precompile" and compile assets for your production/staging machine.

The error seems to occur because sass is not being compiled in the asset pipeline correctly. (Would love to know why this occurs if anyone has the answer)