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

Question

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

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

我尝试添加 require 位和示例函数 importing url，但不确定如何启用此功能。

我怎样才能让它工作？

更新：

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

这是我的咕噜声配置：

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

这是咖啡脚本，有趣的是：

      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.initConfig({
  imageEmbed: {
    dist: {
      src: [ "css/styles.css" ],
      dest: "css/output.css",
      options: {
        deleteAfterEncoding : false
      }
    }
  }
});