私は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 を使用している場合にも発生します (フレームワークはあまり重要ではありません)。
これを修正する方法はありますか?