使用 Stylus 和 Gulp 内联数据 url

Question

目前我有一个导入另一个触控笔文件的触控笔文件。第二个文件像这样使用 URL 函数，我希望它被内联（例如到 base 64 数据-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")

而我的gulp文件如下：

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

基本上 'resolve url' 选项似乎没有传递给手写笔。我知道我需要它，因为它在 Stylus Docs 中说：

By default Stylus doesn’t resolve the urls in imported .styl files, so if you’d happen to have a foo.styl with @import "bar/bar.styl" which would have url("baz.png"), it would be url("baz.png") too in a resulting CSS.

But you can alter this behavior by using --resolve-url (or just -r) CLI option to get url("bar/baz.png") in your resulting CSS.

Answer 1

图像内联的正确选项是 url（不是 resolve url）请参阅 http://learnboost.github.io/stylus/docs/functions.url.html. To use it in gulp-stylus you should pass url option to options object (see 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))

使用 Stylus 和 Gulp 内联数据 url

Inlining data-urls with Stylus and Gulp

css

gulp

stylus