SASS sprite url 工作但图像未显示答案

【问题标题】：SASS sprite url working but image not displayedSASS sprite url 工作但图像未显示
【发布时间】：2013-02-04 06:49:00
【问题描述】：

我是 Compass 的新手，我对精灵生成器非常感兴趣。我看到它工作正常。我遵循了一个教程，但我的精灵遇到了一些问题。我将文件插入到名为spr 的文件夹中。我已经在文件 screen.scss 中插入了以下代码：

@import "spr/*.png";

并为我的标题插入以下内容：

h1{
        @include spr-sprite(Flickr);
        height: 91px;
    }

我检查了检查员，网址正确，背景位置也正确。问题是，一旦检查了检查器元素，它就无法打开图像 url。生成的图片在查找器中确实有效，但文件不存在。名字和位置都很完美。

谁能告诉我他们是否有同样的问题，尤其是如何解决它？

编辑：生成的 CSS

.spr-sprite, header h1 {
    background: url('/images/spr-sbd3b4dd92d.png') no-repeat;
}
header h1 {
    background-position: 0 -120px; height: 91px;
}

【问题讨论】：

您是如何在浏览器中加载页面的？通过file:// 还是使用本地服务器？
生成的 CSS 是什么样的？您是否在 config.rb 中启用了relative_assets？
@steveax 我是通过 file:// 执行此操作的。在我也尝试使用 MAMP 检查这是否是错误之后仍然没有工作。 SASS的本地文件或本地服务器之间有区别
@cimmanon 我正在使用 Scout。它使用 relative_assets=true 自动生成 config.rb。在 CSS 代码中我可以看到精灵的加载+背景位置： * /* line 74, spr/*.png / .spr-sprite, header h1 { background: url('/images/spr- sbd3b4dd92d.png') 不重复； } / 第 41 行，../sass/screen.scss */ header h1 { background-position: 0 -120px;高度：91px； }

标签： import sprite compass-sass sass

【解决方案1】：

不熟悉Scout，但是...

现在 Sass 正在使用 root relative 路径（前导斜杠）。为了解决这些问题：

您必须使用某种本地服务器并加载页面通过 http（浏览器 url 栏中的http://...）
站点必须位于 web 文件夹的根目录（而不是子文件夹）

例如：

├── css
│   └── site.css
├── images
│   └── spr-sbd3b4dd92d.png
├── index.html
└── sub-folder
    └── index.html

如果您希望站点根目录位于子文件夹中，或者能够使用 file:// 协议在浏览器中加载页面，则应在 config.rb 中启用相对路径：

relative_assets = true

如果您的 config.rb 中已经取消注释（即：没有前导 #），那么 Scout 一定不会关注配置文件。

看起来可能是a bug in Scout。

【讨论】：