如何启用 Stylus url() 重写

Question

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

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

我尝试添加 require 位和示例函数，导入 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

Answer 2

我不知道它是怎么变成没有手写笔的，但你可以用这个[1]：http://docs.emmet.io/actions/base64/

Answer 3

我想你会发现这个 grunt 插件正是你所需要的； grunt image embed。适用于图像和字体。来自文档：

grunt.initConfig({
  imageEmbed: {
    dist: {
      src: [ "css/styles.css" ],
      dest: "css/output.css",
      options: {
        deleteAfterEncoding : false
      }
    }
  }
});