Question

我正在使用罗盘我正在生成精灵，并有以下mixin：

$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时也会发生这种情况（框架并不重要）。

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

sprite-url（）返回错误的路径

0 个答案: