postcss-asset-url
Map urls to different locations
Install
$ npm install postcss-asset-url
Usage
Config
var postcss = require("postcss");var assetUrl = require("postcss-asset-url"); var output = postcss() .use(assetUrl({ map: { image: "/assets/images/", font: "/assets/font", icon: "/assets/icon" } })) .process(css) .css;
Input
.app { background-image: url(asset-url("image", "background.png"));} .icon-wrench { background-image: url(asset-url("icon", "wrench.png"));} @font-face { font-family: "Open Sans"; src: url(asset-url("font", "opensans.eot")); src: url(asset-url("font", "opensans.eot?#iefix")) format("embedded-opentype"), url(asset-url("font", "opensans.woff2")) format("woff2"), url(asset-url("font", "opensans.woff")) format("woff"), url(asset-url("font", "opensans.ttf")) format("truetype"); font-weight: normal; font-style: normal;}
Output
.app { background-image: url("/assets/images/background.png"));} .icon-wrench { background-image: url("/assets/icons/wrench.png"));} @font-face { font-family: "Open Sans"; src: url("/assets/fonts/opensans.eot"); src: url("/assets/fonts/opensans.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/opensans.woff2") format("woff2"), url("/assets/fonts/opensans.woff") format("woff"), url("/assets/fonts/opensans.ttf") format("truetype"); font-weight: normal; font-style: normal;}