Question

我正在尝试将我的所有css文件转换为scss，并且这样做会导致错误。我现在要做的是调试错误来自哪里，以及导致它的原因。

当查看我相信错误的文件时，我可以看到以下

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";
      }

虽然我确实知道这是什么意思。

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'

感谢

Answer 1

删除

gem "compass"

来自Gemfile的

。安装compass-rails后，compass gem不是必需的。

确保

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

在<{1}}行中不包含assets。

如果您要从使用SASS的旧版本升级Rails，请在BUNDLE_WITHOUT目录中搜索

等行

config/

并尝试删除它们。我至少看到过一例这样的问题。

在Sass::Plugin.options[...中尝试this suggestion。

尝试在config/application.rb群组之外移动compass-rails并重新捆绑。

确保在每次更改后重新启动服务器

您还应该考虑将您的应用程序升级到Rails 3.2.8。您必须在应用程序代码中进行很少的更改。

在scss中编译错误

1 个答案: