使用Stylus和Gulp内联数据网址

Question

目前我有一个手写笔文件导入另一个手写笔文件.第二个文件使用这样的URL函数,我希望它被内联(例如,到base 64 data-url).但是,当通过我的gulp管道时,这不起作用

lines.styl:

vertical-img = 'vertical.svg';
@import "../tree";

tree.styl

background-image: url(vertical-img)

---

我想得到的结果是:

background-image: url('data:image/svg+xml;utf8,<svg>[...]</svg>');

但我明白了:

background-image: url("vertical.svg")

我的gulpfile如下:

return gulp.src('src/css/*/*.styl')
    .pipe(gstylus({
        set: ['resolve url']
    }))
    .pipe(rename(function (file) {
        file.dirname = "";
        file.extname = ".css";
    }))
    .pipe(gulp.dest(DEST))

基本上似乎'res url'选项没有传递给手写笔.我知道我需要它,因为它在Stylus Docs中说:

默认情况下,Stylus不会解析导入的.styl文件中的url,所以如果你碰巧有一个带有@import"bar/bar.styl"的foo.styl,它会有url("baz.png"),那么在结果CSS中也会是url("baz.png").

但是您可以使用--resolve-url(或者只是-r)CLI选项来改变此行为,以便在生成的CSS中获取url("bar/baz.png").

Answer 1

图像内联的正确选项是url(不resolve url)参见http://learnboost.github.io/stylus/docs/functions.url.html.要在其中使用它,gulp-stylus应将url选项传递给options对象(请参阅https://github.com/jenius/accord/blob/master/docs/stylus.md#url).例如:

return gulp.src('src/css/*/*.styl')
.pipe(gstylus({
    url: { name: 'url', limit: false }
}))
.pipe(rename(function (file) {
    file.dirname = "";
    file.extname = ".css";
}))
.pipe(gulp.dest(DEST))