Search code examples
svglessdata-uri

Am I misundertanding the data-uri function in less


I'm trying to use the less data-uri function

http://lesscss.org/functions/#misc-functions-data-uri

.test {background-image:data-uri("/images/ui-baseline.svg");}

I expected it to compile a base64 background image

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

However I can't seem to get this to work. The compiled output is:

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

Have I missed something? Does the function accept root relative paths?

I'm using Koala and it up to date using less 1.7

Thanks


Solution

  • Solved!

    the problem was Koala requires a local install of less.

    https://github.com/oklai/koala/issues/262#issuecomment-49688887