Stylus url() 函数

🌙
手机阅读
本文目录结构

函数之url()

内联Data URI图像

Stylus捆绑了一个可选函数,名叫url(),其替换了字面上的url()调用(且使用base64 Data URIs有条件地内联它们)。

示例

通过require(‘stylus’).url该函数本身是可用的,其接受一个options对象,当看到url()时候,返回Stylus内部调用的函数。

.define(name, callback)方法指定了一个可被调用的JavaScript函数。在这种情况下,因为我们图片在./css/images中,我们可以忽视paths选项(默认情况下,会查找相关要呈现的图像文件)。如果愿意,该行为时可以改变的。

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

  });

例如,想象图片在 ./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){

  });

选项(Options)

  • limit 大小默认限制30Kb(30000)
  • paths 图像解析路径

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了