指南针中的精灵加载

Question

我正在从一个大约 4 岁的教程中学习如何使用 Compass。我的问题是精灵根本没有加载，尽管错误中列出的目录是精灵的正确位置。

我收到以下两条错误消息：

 Failed to load resource: net::ERR_EMPTY_RESPONSE (12:12:47:223 | error, network)
   at http://localhost:8383/images/spr-sf52e1e883c.png
 Failed to load resource: net::ERR_EMPTY_RESPONSE (12:13:45:615 | error, network)
   at http://localhost:8383/images/pitch-s4b17d3ee2e.png

鉴于我的项目的目录结构，这对我来说似乎是正确的地址。见附图。

我发现我的 sprite 文件的位置不正确，或者我生成的 css 在 sprite 文件所在的位置不正确。下面是在 CSS 中生成的代码。

/* ===================================================== */
/* Sprites
/* ===================================================== */
.spr-sprite, header h1 {
  background-image: url('/images/spr-sf52e1e883c.png');
  background-repeat: no-repeat;
}

.pitch-sprite, .pitch.left div, .pitch.middle div, .pitch.right div {
  background-image: url('/images/pitch-s4b17d3ee2e.png');
  background-repeat: no-repeat;
}

有效的方法是在调用精灵时备份一个目录：

 .spr-sprite, header h1 {
     background-image: url('../images/spr-sf52e1e883c.png');
     background-repeat: no-repeat;
 }

 .pitch-sprite, .pitch.left div, .pitch.middle div, .pitch.right div {
     background-image: url('../images/pitch-s4b17d3ee2e.png');
     background-repeat: no-repeat;
 }

现在我可以看到精灵了。

我不知道在哪里可以解决这个问题，我希望我的描述足以让有人给我建议

我所有的研究都指向使用配置参数“relative_assets = true”来解决这个问题，但我似乎无法说服我的指南针项目为我的精灵图像提供相对目录“../”。我用这个配置文件编译我的精灵。

 /* ===================================================== */
 /* Sprites
 /* ===================================================== */
 @import "spr/*.png";
 @import "pitch/*.png";

这是我的 config.rb

 # Require any additional compass plugins here.
 # -----------------------------------------------------------------------------
 project_path = File.expand_path("..",File.dirname(__FILE__))

 # Set this to the root of your project when deployed:
 # -----------------------------------------------------------------------------

 relative_assets = true

 http_images_dir = "images"

 http_path = "/"
 css_dir = "css"
 sass_dir = "scss"
 images_dir = "images"
 javascripts_dir = "js"


 # Output style and comments
 # -----------------------------------------------------------------------------

 # You can select your preferred output style here (can be overridden via the command line):
 # output_style = :expanded or :nested or :compact or :compressed
 # Over-ride with force compile to change output style with: compass compile --output-style compressed --force
 output_style = :expanded
 #environment = :development

 line_comments = false
 cache = true
 color_output = false # required for Mixture

 require 'sass-globbing'

 # Obviously
 preferred_syntax = :scss

 # SASS core
 # -----------------------------------------------------------------------------

 # Chrome needs a precision of 7 to round properly
 Sass::Script::Number.precision = 7

不知道有没有人发现问题

Answer 1

我不知道 config.rb 文件中有什么不正确的地方。通过替换另一个教程中的一个，它起作用了。