Всем привет.
gulpfile.js
gulp.task('compass', function() {
gulp.src(['./app/styles/*.sass', '!app/styles/lib/_*.sass'])
.pipe(compass({
css: 'public/css',
sass: 'app/styles',
style: 'compact',
images_dir: 'app/img/',
images_path: 'f:/progect/app/img/',
generated_images_dir: 'public/img/',
generated_images_path: 'f:/progect/public/img',
}))
.pipe(gulp.dest('public/css/'))
.pipe(connect.reload());
});
Делал все как указано на сайте.
_mixins.sass
$icons: sprite-map("public/img/icons/*.png", $spacing: 10px)
// sized sprites
=image-size($path)
width: image-width($path)
height: image-height($path)
=sized-sprite($map, $sprite)
background: sprite($map, $sprite) no-repeat
@include image-size(sprite-file($map, $sprite))
=s($sprite, $map: $icons)
background: sprite($map, $sprite) no-repeat
//background-image: inline-image('icons/'+$sprite+'.png','image/png'); to switches sprites to base64, elegant
@include image-size(sprite-file($map, $sprite))
$icons: sprite-map("public/img/icons/*.png", $spacing: 10px)
- Вот только с таким путем он находит png, не зависимо от конфига. Перепробовал все варианты. Иначе выдает ошибку.
+s(button) - непосредственно вставляем сам миксин в нужное место , что бы получить эффект. После компиляции мы получаем:
url('../img/public/img/icons-s19c8d80a14.png')
Но и генерирует изображение вот с такой вложенностью : public/img/public/imj/...png
Не смотря на все это, оно работает.
Что бы исправить ненужную нам вложенность я меняю
generated_images_path: 'f:/progect/public/',
на
generated_images_path: 'f:/progect/',
и в итоге я избавляюсь от вложенности. Мне картинку кладет куда надо, но вот относительный путь:
url('../.../public/img/icons-s19c8d80a14.png')
В итоге браузер не видит картинку так как выйдя из папки стилей он пытается найти папку Public.
Это для наглядности, где и как у меня все расположено. Помогите настроить столь мощный инструмент.
Как все же тут настроить вложенность, либо относительный путь к изображению? Что бы не править все ручками, а отдавать готовый проект в работу.