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

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

问题是我的精灵路径出来了,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'),根据配置参考,请记住本地路径*_path与完整http路径不同http_*_path.

因此,要访问public/imageswebroot所存储的图像public,您必须工作两次:

1. 你必须告诉Compass图像存储在本地public/images目录中:images_dir = "public/images".
2. 必须配置完整的http路径:http_images_path = "/images"对于常规图像(当您使用帮助程序时image-url())和http_generated_images_path = "/images"生成的精灵.

最终配置文件变为:

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