sass - 指南针精灵未在浏览器中显示

Question

我正在使用基于 Sass 构建的 Zurb Foundation 3，我已设法导入精灵和显示所有生成的精灵的图像文件夹，但它们都没有出现在浏览器中。

HTML

<div class="six columns">
    <a href="#"><h2>Al Umrah</h2></a>
</div>

SCSS

$siteImages-layout:smart;
@import "siteImages/*.png";
@include all-siteImages-sprites;


h2{@include siteImages-sprite(al-umrah-logo);height:261px;}

生成的 CSS

.siteImg-sprite, .siteImg-al-umrah-logo, .siteImg-hajj, .siteImg-home, .siteImg-umrah,     h2 {
background:url('/images/siteImg-sf72f1f5d54.png') no-repeat
}
.siteImg-al-umrah-logo {
background-position:0 -384px
}
.siteImg-hajj {
background-position:0 -128px
}
.siteImg-home {
background-position:0 -256px
}
.siteImg-umrah {
background-position:0 0
}
h2 {
background-position:0 -384px;
height:261px
}

RB配置

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# relative_assets = true

PS：我在桌面上有这个文件夹

Answer 1

CSS 文档请求的文件在您的测试机器上不存在。由于您是从桌面查看文档，因此图像的绝对路径可能类似于C:\Users\username\desktop\path\to\images\siteImg-sf72f1f5d54.png，而不是/images/siteImg-sf72f1f5d54.png。

启用relative_assets应该将路径更改为类似的路径../images/siteImg-sf72f1f5d54.png，这对您的测试机器和生产服务器都有效。