Css 使用手写笔和Gulp内联数据URL

目前我有一个输入另一个手写笔文件的手写笔文件。第二个文件使用如下URL函数，我希望它是内联的（例如，到一个基本64数据URL）。然而，这是不工作时，通过我的吞咽管道运行

行。styl：

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

tree.styl

background-image: url(vertical-img)

---

我希望得到的结果是：

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

基本上，“解析url”选项似乎没有传递到触控笔。我知道我需要它，因为它在

默认情况下，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”）来改变这种行为

---

图像内联的正确选项是

url

（而不是

resolve url

），请参阅。要在

gulp手写笔中使用它，您应该将
url
选项传递给options对象（请参阅）。例如：

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))

我认为文档中关于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))