图片内联（Data URI）

Stylus 内置了一个名为 url() 的可选函数，它可以替换 CSS 字面量的 url() 调用（并有条件地使用 base64 Data URIs 进行内联）。

可选参数

• limit：字节大小，默认限制为 30kb（30000），设置为 false 以禁用限制
• paths：图像解析路径

例子

该函数本身可以通过 require('stylus').url 获取。它接受一个 options 对象，并返回一个函数，当 Stylus 遇到 url() 时会内部调用该函数。

.define(name, callback) 方法将一个 JavaScript 函数分配给 Stylus 源文件调用。在本例中，由于我们的图片位于 ./css/images 目录下，我们可以忽略 paths 选项（默认情况下，图片查找是相对于正在渲染的文件进行的）。但如果需要，可以更改此行为：

stylus(str)
  .set("filename", __dirname + "/css/test.styl")
  .define("url", stylus.url())
  .render(function (err, css) {
    // render it
  });

例如，假设我们的图片位于 ./public/images 目录下。我们想要使用 url(images/tobi.png)。我们可以将 paths 参数设置为公共目录，这样它就会成为查找过程的一部分。

同样地，如果我们想要使用 url(tobi.png)，我们可以将 paths 参数设置为 [__dirname + '/public/images']。

stylus(str)
  .set("filename", __dirname + "/css/test.styl")
  .define("url", stylus.url({ paths: [__dirname + "/public"] }))
  .render(function (err, css) {
    // render it
  });

SVG 的 utf8 编码

由于 Base64 编码实际上会增加图像的原始大小，因此在嵌入 SVG 时，我们可以选择使用 utf8 编码。

为此，使用内置函数：embedurl()：

.embed-with-utf8 {
  background-image: embedurl("circle.svg", "utf8");
}

这将生成 utf-8 编码的内联 SVG，而不是 base64 编码的 SVG。

如果你想使用 JavaScript 定义，以便使用 paths 参数的时候使用 utf 编码，这时候你无法直接使用url()。这是由于 Stylus 中 url() 函数的解析方式导致：目前无法传递额外的参数，因此你不能直接调用 url 并设置第二个参数来指定编码。但如果你使用单独定义另一个函数来实现 url()：

stylus(str)
  .set("filename", __dirname + "/css/test.styl")
  .define("inline-url", stylus.url({ paths: [__dirname + "/public"] }))
  .render(function (err, css) {
    // render it
  });

然后，我们成功的定义了一个内置函数：inline-url()，你可以像使用 embedurl() 一样使用它。inline-url() 还额外提供了 paths 参数功能。

.embed-with-utf8-at-path {
  background-image: inline-url("tobi.svg", "utf8");
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24