Base64 + Stylus = как сделать?

Question

[Moe Green]

Доброго времени суток всем.

Такой вопрос - в Stylus есть встроенная функция для преобразования изображений в формат base64. Однако, официальная документация мне не помогла - не получилось настроить у себя.

Подскажите (в виде примера?), как реализовать поддержку base64 в Stylus?

Answer 1

[zenwarr]

Просто нужно присвоить url другую функцию, которая будет использоваться вместо нее. Если использовать gulp, то это делается вот так:

gulpfile.js

var gulp = require('gulp');
var stylus = require('gulp-stylus');

var styles_input = 'src/styles';
var styles_output = 'css';

gulp.task('stylus', function() {
  var stream = gulp.src(styles_input + '/*.styl')
      .pipe(stylus(
            {
              url: 'embedurl'
            }))
      .pipe(gulp.dest(styles_output));
});

gulp.task('default', function() {
  gulp.start('stylus');
});

Здесь передается стандартная функция-замена url стилуса, которую accord, который занимается вызовом стилуса, обозвал embedurl, но можно, в том числе, написать свою замену.

и, собственно, style.styl

@charset "UTF-8";

url = embedurl

body
  background url(../img/site-logo.png)

Получается вот что:

@charset "UTF-8";
body {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAtCAYAAADr0SSvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRDOUQ0NzhFMDgyRDExRTVBNjA2OTE1QkM5MzkxQkVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRDOUQ0NzhGMDgyRDExRTVBNjA2OTE1QkM5MzkxQkVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEM5RDQ3OEMwODJEMTFFNUE2MDY5MTVCQzkzOTFCRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEM5RDQ3OEQwODJEMTFFNUE2MDY5MTVCQzkzOTFCRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4fRSEjAAAJGUlEQVR42uxd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");
}

Answer 2

[rykketid]

Фрагмент моего gulpfile.js для выполнения этой задачи

import gulp from 'gulp';
import stylus from 'gulp-stylus';

gulp.task('styles', () => (
	gulp.src('*.styl', {
			cwd: 'app/styles',
			nonull: true
		})
		.pipe(stylus({
			define: {
				url: stylus.stylus.url({
					paths : 'dist/assets/images'
				})
			},
		}))
		.pipe(gulp.dest(paths.styles))
));