Question

我一直在为Compass Sprites的路径而奋斗几天。

我的网站有以下结构：

+ project
    - config.rb
    + application
        + scss
            - _base.scss
            - main.scss
            - ...
    + public (webroot)
        + js
        + css
            - main.css
        + images
            + sprites
                - boxarrow.png
                - boxcheck.png
                - ...

我的config.rb最初看起来像：

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

在我的scss文件中，我使用以下内容扫描我的精灵：

$sprites: sprite-map("sprites/*.png");

并将它与我写的mixin一起使用：

@mixin scaled-sprite-background($name, $scale, $spritemap) {
    background: $spritemap;

    $spritePath: sprite-path($spritemap);
    @include background-size(image-width($spritePath) * $scale);

    $position: sprite-position($spritemap, $name);
    background-position: (nth($position, 1) * $scale) (nth($position, 2) * $scale);

    height: image-height(sprite-file($spritemap, $name)) * $scale;
    width: image-width(sprite-file($spritemap, $name)) * $scale;
}

问题是我的精灵路径出现了ala public/images/sprites-s500a0fe4b1.png而他们不应该有公众/。

我删除了public/所以我只有images_dir = "images"但现在罗盘无法找到我的图片。

我设置了http_path = "public"并且双重公开 public/public/images/sprites-s500a0fe4b1.png

我使用images_path尝试了更多配置，但无济于事。

我目前正在进行的工作黑客攻击：

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

on_sprite_saved do |filename|
  FileUtils.mv(filename, images_path + "/" + File.basename( filename )) if File.exists?(filename)
end

它不漂亮但它有效。当然需要有更好的方法！

非常感谢任何帮助。

Answer 1

相对资产

如果要使用图像和CSS之间的相对路径（即background: url('../images/foo.png')），则必须在配置文件中添加relative_assets = true：

css_dir = "public/css"
sass_dir = "application/scss"
images_dir = "public/images"
javascripts_dir = "public/js"
relative_assets = true

有了这个，Compass将忽略http_path选项，并将生成相对于CSS文件路径位置的图像访问权。

绝对资产

如果您想使用绝对路径来访问您的图片（例如background: url('/images/foo.png')，请configuration reference，请记住本地路径*_path与完整的http路径{{1}不同1}}。

因此，要在webroot为http_*_path时访问存储在public/images中的图片，您必须工作两次：

你必须告诉指南针，这些图像存储在public目录的本地：public/images。
必须配置完整的http路径：images_dir = "public/images"用于常规图像（当您使用助手http_images_path = "/images"时）和image-url()用于生成的精灵。

最终配置文件变为：

http_generated_images_path = "/images"

Answer 2

您需要告诉Compass图像的URL路径与本地路径不同：

http_images_path = "/images/"

当 http_images_path 为空时，指南针使用

http_images_path = {http_path}/{images_dir}

指南针Sprite表路径与Webroot文件夹

2 个答案:

相对资产

绝对资产