2

我正在使用 gulp 的指南针。
我正在生成精灵并具有以下混合：

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

@mixin sprite-icon($name) {
    background-image: $sprite-icons-url;
    background-position: sprite-position($sprite-icons, $name);
    background-repeat: no-repeat;
}

我的 gulp 任务将app/styles/index.scss其编译为build/styles/index.css. 图像取自app/assets/images/sprite-icons，我希望精灵图像位于build/assets/images.

我正在使用以下参数运行指南针：

images_dir = 'app/assets/images'
css_dir = 'build/styles'
sass_dir = 'app/styles'
generated_images_path = 'build/assets/images'

现在我的一个 scss 文件中有以下样式：

.my-image {
    @include sprite-icon('pin-small');
}

我得到了：

.my-image {
  background-image: url('../../assets/images/sprite-icons-sc86bb5a991.png');
  background-position: 0 -669px;
  background-repeat: no-repeat;
}

问题是我需要背景图像：

background-image: url('/assets/images/sprite-icons-sc86bb5a991.png');

使用 grunt 时也会发生这种情况（框架并不重要）。

知道如何解决这个问题吗？

4

0 回答 0