Question

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

我正在尝试按照文档here进行操作，但这对我没什么帮助。

我尝试添加require位和示例函数，导入url，但不知道如何启用此功能。

如何让它发挥作用？

更新

这是我的咕噜声配置：

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 image embed。适用于图像和字体。来自文档：

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

如何启用Stylus url（）重写

3 个答案: