javascript - 如何启用 Stylus url() 重写

Question

我正在尝试让手写笔 URL 起作用。我想将 url('/path/to/img.png') 转换为 base64 编码形式。

我正在尝试遵循文档 here ，但这对我帮助不大。

我尝试添加要求位和示例函数，导入 url，但不确定如何启用它。

我如何让它工作？

更新:

尝试使用 grunt-image-embed插件。

这是我的 grunt 配置:

imageEmbed: {
  dist: {
    src: [ "./public/local/css/images.css" ],
    dest: "./public/prod/css/images.css",
    options: {
      deleteAfterEncoding : false
    }
  }
},

CSS 包含:

#footer-social .youtube {
  width: 18px;
  background-image: url('/img/youtube-icon.png');
}

产生错误的地方:

Warning: File C:\path\...\grunt-image-embed\tasks\lib\img\youtube-icon.png
does not exist Use --force to continue.

如果我删除 background-image 行，一切正常。我无法修改 css 中的路径，因为在 local 上我们使用实际图像的相对路径。

Answer 1

试试这个:

function compile(str, path) {
  return stylus(str)
            .define('url', stylus.url({
              paths : [__dirname + '/public'],
              limit : 10000
            }));
}

从这里开始:

http://bengourley.co.uk/using-stylus

它在这里对我有用:

https://github.com/MichaelJCole/wintersmith-stylus/blob/master/plugin.coffee

这是 coffeescript，有趣的部分是:

      stylus(@_text, options)
      .use(nib())
      .define('url', stylus.url(
        paths : [__dirname + '/public']
        limit : locals.inlineSpriteMaxBytes || 0 ) )
      .render (err, css) ->
        if err
          callback err
        else
          callback null, new Buffer css