2

私はgulpでコンパスを使用しています。
私はスプライトを生成しており、次の 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 ファイルの 1 つに次のスタイルがあります。

.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