目前我有一个可以导入另一个手写笔文件的手写笔文件。第二个文件使用这样的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))
基本上似乎是“解析网址”。选项不会传递给手写笔。我知道我需要它,因为它在Stylus Docs中说:
默认情况下,Stylus不会解析导入的.styl文件中的url,所以如果你碰巧有一个foo.styl和@import&#34; bar / bar.styl&#34;哪个会有url(&#34; baz.png&#34;),在结果CSS中也会是url(&#34; baz.png&#34;)。
但是您可以使用--resolve-url(或者只是-r)CLI选项来改变这种行为,以便在生成的CSS中获取url(&#34; bar / baz.png&#34;)。
答案 0 :(得分:5)
图片内联的正确选项是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))