compile error within scss

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

It looks like you have something Sass is considering corrupt in _content.css_, could you post the content of that file? — rudolph9, Aug 19 '12 at 11:29
Please show your `/Gemfile`'s contents. SASS is complaining that it can't find the Compass stylesheet. Perhaps you've installed Compass incorrectly. — deefour, Aug 19 '12 at 11:41
could you post the content of _content.css_, not content.css.scss you said you are converting from css to scss correct? — rudolph9, Aug 19 '12 at 11:46
dont have the css, what i meant was using the intelligence within scss, to make sprites etc... — Boss Nass, Aug 19 '12 at 11:54
@rudolph9 The content.css file won't be generated if it fails as OP mentioned in the question. — deefour, Aug 19 '12 at 11:56

score 0 · Accepted Answer · edited May 23 '17 at 10:27

0

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.

edited May 23 '17 at 10:27

Community

1
1

answered Aug 19 '12 at 11:59

deefour

34,974
7
97
90

still getting errors, from the console window im getting `tarted GET "/assets/content.css" for 124.168.200.4 at 2012-08-19 14:02:00 +0200 Error compiling asset content.css: Sass::SyntaxError: File to import not found or unreadable: compass. Load path: /home/html/teammngt (in /home/html/teammngt/app/assets/stylesheets/content.css.scss) Served asset /content.css - 500 Internal Server Error` – Boss Nass Aug 19 '12 at 12:05
interesting as well, that the other files compiled, just not this one :S – Boss Nass Aug 19 '12 at 12:13
If this is the only file including `compass`, that's not a surprise. I've added more things to try to my answer. It's more than likely you've got some seemingly unrelated config line conflicting with what compass/rails/sprockets needs to find the compass file. – deefour Aug 19 '12 at 12:15
all the other files are including compass, could that be an issue? – Boss Nass Aug 19 '12 at 12:16
not sure which part fixed it, if it was updating to 3.2.8 or editing the gemfile, or editing the application.rb but it appears to be working – Boss Nass Aug 19 '12 at 12:42
1

Glad you got it sorted out; I should have mentioned to go one change at a time so you could pinpoint the fix. :) – deefour Aug 19 '12 at 13:15

compile error within scss

1 Answers1