Resolving Image Paths in SCSS and Jade Templates

Add images in SCSS and see the path resolved correctly according to the environment

Add a background image in SCSS

.myimage {
background-image: resolve("png/penrose-tile.png");
width: calc(width("png/penrose-tile.png") / 2);
height: calc(height("png/penrose-tile.png") / 2);
// background-size: size("png/penrose-tile.png");
background-size: calc(width("png/penrose-tile.png") / 2), calc(height("png/penrose-tile.png") / 2);
}

In-line an SVG in SCSS

.mysvg {
 background-image: inline("svg/octopus.svg");
 width: width("svg/octopus.svg");
 height: height("svg/octopus.svg");
 background-size: 50px 50px;
 /* url('data:image/svg+xml;charset=utf-8,... */
}

Resolve an image path in a Jade template using 'baseUrl'

img.mr-3(alt='' height='48' src=baseUrl + 'images/svg/octopus.svg' width='48')