2013-08-09 2 views
1

Я пытаюсь получить URL-адрес стилуса для работы. Я хотел бы преобразовать url('/path/to/img.png') для преобразования в кодировку base64.Как включить Stylus url() переписать

Я стараюсь следовать документации here, но это не очень помогает мне.

Я попытался добавить бит потребности и примеры функций, импортируя url, но не уверен, как включить эту вещь.

Как я могу заставить это работать?

UPDATE:

Попытка использовать grunt-image-embed плагин.

Вот мой хрюкать конфигурации:

imageEmbed: { 
    dist: { 
    src: [ "./public/local/css/images.css" ], 
    dest: "./public/prod/css/images.css", 
    options: { 
     deleteAfterEncoding : false 
    } 
    } 
}, 

И CSS содержит:

#footer-social .youtube { 
    width: 18px; 
    background-image: url('/img/youtube-icon.png'); 
} 

который производит ошибку:

Warning: File C:\path\...\grunt-image-embed\tasks\lib\img\youtube-icon.png 
does not exist Use --force to continue. 

Если я удалить background-image строки это все работает и проходит через штраф. Я не могу изменить пути в css, потому что на local мы используем относительный путь к фактическому изображению.

ответ

-1

Я думаю, вы найдете этот плагин хрюкать, чтобы быть именно то, что вам нужно; grunt image embed. Работает как для изображений, так и для шрифтов. Из документов:

grunt.initConfig({ 
    imageEmbed: { 
    dist: { 
     src: [ "css/styles.css" ], 
     dest: "css/output.css", 
     options: { 
     deleteAfterEncoding : false 
     } 
    } 
    } 
}); 
+0

Почему он пытается загрузить изображения из папки узла? Выполнение задачи imageEmbed: dist "(imageEmbed) Предупреждение: Файл C: \ ... \ node_modules \ grunt-image-embed \ tasks \ lib \ img \ audio.png не существует. Использование --force для продолжения.' – Rob

+0

Мои дорожки выглядят так: '.audio {background-image: url ('/ img/audio.png')}' – Rob

+0

Не могли бы вы вставить свою конфигурацию в пастебин или подобное, чтобы я мог посмотреть на него? – Ben

2

попробовать это:

function compile(str, path) { 
    return stylus(str) 
      .define('url', stylus.url({ 
       paths : [__dirname + '/public'], 
       limit : 10000 
      })); 
} 

Отсюда:

http://bengourley.co.uk/using-stylus 

Он работал для меня здесь:

https://github.com/MichaelJCole/wintersmith-stylus/blob/master/plugin.coffee 

Это CoffeeScript и интересно часть:

 stylus(@_text, options) 
     .use(nib()) 
     .define('url', stylus.url(
     paths : [__dirname + '/public'] 
     limit : locals.inlineSpriteMaxBytes || 0)) 
     .render (err, css) -> 
     if err 
      callback err 
     else 
      callback null, new Buffer css 
Смежные вопросы