2016-03-01 68 views
0

我正在学习如何从约4岁的教程中使用Compass。我的问题是精灵根本不加载,尽管错误中列出的目录是精灵的正确位置。Sprite在指南针中加载

我收到这两个错误消息:

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

什么工作是备份一个目录中的呼唤精灵:

.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 =真” ,解决这个问题,但我似乎无法说服我的指南针项目给我的相关目录“../”为我的精灵图像。我用这个配置文件编译我的精灵。

/* ===================================================== */ 
/* 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 

我不知道是否有人看到了问题

回答

0

也有一些是我不知道是什么在config.rb文件不正确。通过从另一个教程中替换它的工作。