Question

i am attempting to convert all my css files to scss, and in doing so I have caused an error. what im trying to do now is debug where the error is coming from, and what has caused it.

when viewing the file which i believe in the error is in, i can see if the following

body:before {
        font-weight: bold;
        content: "\000a Sass::SyntaxError: File to import not found or unreadable: compass.\000a Load path: \002f home\002f html\002f teammngt\000a   (in \002f home\002f html\002f teammngt\002f app\002f assets\002f stylesheets\002f content.css.scss)";
      }

      body:after {
        content: "\000a   \002f home\002f html\002f teammngt\002f app\002f assets\002f stylesheets\002f content.css.scss:1";
      }

though i do know exactly what this is meaning.

content.css.scss

@import "compass";

/* Let the body fill the window */

html, body {
  height: 100%;
  min-height: 100%;
  background-color: #fafafa; }

/* Fill the window but let some space for the footer */

#height-wrapper {
  height: auto !important;
  height: 100%;
  margin: 0 auto -38px;
  min-height: 100%; }

#content-wrapper {
  height: 100%;
  position: relative;
  margin-bottom: 38px; }

.push {
  height: 38px; }

.webkit {
  .push {
    height: 60px; }
  .clear .push {
    height: 38px; } }

/* ==================================================
 * 2) Main Content
 * ================================================== */

#main_content {
  padding: 20px;
  overflow: hidden;
  h2 {
    margin-top: 0;
    padding-bottom: 6px;
    margin-bottom: 4px;
    width: 100%;
    background: url('main_content/title-underline.png') repeat-x bottom; } }

/* ==================================================
 * 3) Boxes
 * ================================================== */

.box {
  margin-top: 15px;
  .header {
    background: rgb(120, 177, 237);
    @include background-image(linear-gradient(top, rgba(120, 177, 237, 1) 0%, rgba(65, 123, 181, 1) 100%));
    height: 34px;
    line-height: 34px;
    border: 1px solid #2B5177;
    border-radius: 3px 3px 0 0;
    border-bottom: none;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
    &.grey {
      background: url(../img/sprites/boxes/bg-header.png);
      filter: none;
      border-color: #C8C8C8;
      h3 {
        color: #383838;
        text-shadow: none; } } }
  &.closed .header {
    border-bottom: 1px solid #2B5177;
    border-radius: 3px; }
  .header {
    h3 {
      float: left;
      display: inline-block;
      margin: 0;
      padding: 0;
      margin-left: 8px;
      padding-left: 10px;
      background: url('sprites/boxes/divider-header.png') top left no-repeat !important; }
    &.no-icon h3 {
      background: none !important;
      margin-left: 0; }
    img {
      display: inline-block;
      margin: 9px auto;
      margin-left: 8px;
      float: left;
      -moz-user-select: none; }
    span {
      background: url('icons/packs/fugue/16x16/toggle.png') no-repeat;
      cursor: pointer;
      display: block;
      float: right;
      height: 16px;
      margin-right: 10px;
      margin-top: 10px;
      width: 16px; } }
  &.closed span {
    background: url('icons/packs/fugue/16x16/toggle-expand.png') no-repeat; }
  .content {
    padding: 0 10px;
    border: 1px solid #C8C8C8;
    border-radius: 0 0 3px 3px;
    border-top: 1px solid #2B5177;
    background: #fff; }
  &.closed .content {
    display: none; }
  .content {
    &.grey {
      border-top-color: #C8C8C8; }
    &:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden; }
    &.with-actions {
      border-radius: 0;
      border-bottom: 0; }
    &.no-header {
      border-radius: 3px;
      border: 1px solid #C8C8C8; }
    &.no-padding {
      padding: 0; } } }

/* ==================================================
 * 3a) Boxes: Header
 * ================================================== */

/* ==================================================
 * 3b) Boxes: Content
 * ================================================== */

.border-radius-bottom {
  border-radius: 0 0 3px 3px; }

/* ==================================================
 * 3c) Boxes: Actions Bar
 * ================================================== */

.box {
  .actions {
    border: 1px solid #c8c8c8;
    background: url('sprites/boxes/bg-action.png') repeat-x #f7f7f7;
    border-radius: 0 0 3px 3px;
    &:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden; }
    input {
      margin: 0; } }
  .actions-left {
    float: left;
    margin: 5px;
    margin-left: 10px; }
  .actions-right {
    float: right;
    margin: 5px;
    margin-right: 10px; }
  .header ul {
    font-size: 12px;
    height: 23px;
    padding: 0;
    margin: 7px 0;
    margin-right: 6px;
    margin-top: 6px;
    float: right; } }

/* ==================================================
 * 3d) Boxes: Tabs
 * ================================================== */

.ie ul {
  overflow: hidden;
  border-radius: 5px; }

.box li {
  display: inline;
  list-style: none;
  a {
    padding: 0 10px;
    margin: 0;
    border-bottom: 1px solid #C0C0C0;
    border-top: 1px solid #C0C0C0;
    /* Gradient */
    background: #fefefe;
    /* Old browsers */
    @include background-image(linear-gradient(top, #fefefe 0%, #f7f7f7 80%, #ededed 96%, #e5e5e5 100%));
    /* IE6-9 */ }
  &:first-child a {
    border-radius: 5px 0 0 5px;
    border-bottom: 1px solid #C0C0C0;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0; }
  &:last-child a {
    border-radius: 0 5px 5px 0;
    border-bottom: 1px solid #C0C0C0;
    border-top: 1px solid #C0C0C0;
    border-right: 1px solid #C0C0C0; }
  &.current a {
    background: rgb(46, 86, 129);
    @include background-image(linear-gradient(top, rgba(46, 86, 129, 1) 0%, rgba(88, 130, 175, 1) 100%));
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    /* The inset shadow */
    -webkit-box-shadow: inset 0px 0px 3px 0px #000;
    -moz-box-shadow: inset 0px 0px 3px 0px #000;
    box-shadow: inset 0px 0px 3px 0px #000; }
  a {
    line-height: 21px;
    display: block;
    float: left; }
  &.current a {
    color: #FFFFFF; } }

Gemfile

source 'https://rubygems.org'

gem 'rails', '3.2.3'
gem 'therubyracer'

# Database Gems
gem 'yaml_db'
gem 'sqlite3'
gem 'thin'
gem 'pg'
gem 'rb-readline'

#Application Processing
gem 'haml'
gem 'json'
gem "spreadsheet"
gem "paperclip"

#Application required gems
gem "simple-navigation", "~> 3.7.0"
gem 'event-calendar', :require => 'event_calendar'
gem "watu_table_builder", :require => "table_builder"
gem 'best_in_place'
gem "to_xls", :git => "https://github.com/dblock/to_xls.git", :branch => "to-xls-on-models"
#gem 'nexmo'
#gem 'action_smser'
gem 'twilio-ruby'

#Auth and Management
gem "devise"
gem 'devise_invitable', '~> 1.0.0'
gem "cancan"
gem 'cantango'
gem "switch_user"
gem 'paper_trail', '~> 2'
gem "omniauth-facebook"
gem 'bcrypt-ruby', '~> 3.0.0'
gem 'announcements'

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', :platform => :ruby

  gem 'uglifier', '>= 1.0.3'
  gem 'compass-rails'
  gem "compass", "~> 0.12.1"
end

gem 'jquery-rails'

thanks

Answer 1

Remove

gem "compass"

from your Gemfile. With compass-rails installed, the compass gem is not necessary.

Ensure

/path/to/your/project/.bundle/config

does not contain assets in the BUNDLE_WITHOUT line.

If you’re upgrading Rails from an older version that you used SASS with, search your config/ directory for lines like

Sass::Plugin.options[...

and try removing them. I’ve seen at least one case of this causing issues.

Try this suggestion in your config/application.rb.

Try moving compass-rails outside of the :assets group and bundle again.

Make sure you’re restarting your server after each change

You should also consider upgrading your application to Rails 3.2.8. You will have to change very little in your application’s code.