指南针

时间:2016-03-01 05:04:52

标签: compass-sass

我正在学习如何在大约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

对于我项目的目录结构,这看起来像是正确的地址。见附图。 project map

我发现我的精灵文件位于不正确的位置,或者我的生成的css在精灵文件所在的位置不正确。下面是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;
}

在调用sprite中备份一个目录是有效的:

 .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_assests = 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

我想知道是否有人发现问题

1 个答案:

答案 0 :(得分:0)

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