我无法使用data-uri()函数在gulp.js上运行以在mac上运行base64图像

时间:2015-02-22 15:13:03

标签: gulp data-uri gulp-less

我有一个较少的mixin设置来生成base64背景图像,就像这个示例输出一样。

.test {
  background-image: url("/images/ui-baseline.png");
}

.svg .test {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNDAiID48cmVjdCB5PSIzOSIgZmlsbD0iI0ZGODBDQiIgd2lkdGg9IjUiIGhlaWdodD0iMSIvPjxwYXRoIGZpbGw9IiM4MERERkYiIGQ9Ik01LDM1SDB2LTFoNVYzNXogTTUsMzBIMHYtMWg1VjMweiBNNSwyNUgwdi0xaDVWMjV6IE01LDIwSDB2LTFoNVYyMHogTTUsMTVIMHYtMWg1VjE1eiBNNSwxMEgwVjloNVYxMHogTTUsNUgwVjRoNVY1eiIvPjwvc3ZnPg==);
}

它在我的windows gulp环境中运行得很好,但是我不能让它在同一个gulp环境的mac版本上工作。

在我的Mac上运行gulp我得到这样的东西:

  .test{
      background-image: url("/images/ui-baseline.png");
  }
  .svg .test {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%222px%22%20height%3D%222px%22%20viewBox%3D%220%200%202%202%22%3E%3Crect%20width%3D%222%22%20height%3D%221%22%20%20fill%3D%22%23000000%22%20%2F%3E%3Crect%20y%3D%221%22%20fill%3D%22%233C3C3C%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E");
  }

我过去常常使用考拉处理,无论是在Windows还是Mac上,它们都能正常工作。在我的koala.json文件中,我必须为no-ie-compat

设置选项

我从我的mac中删除了gulp.js并将其替换为我的Windows版本,我仍然遇到同样的问题。

我完全不知所措。

有什么想法吗? 感谢

1 个答案:

答案 0 :(得分:1)

在git hub上提出问题后,结果证明这是故意的并且具有性能优势

https://github.com/less/less.js/issues/2469