jamiebuilds / Postcss Asset Url
Licence: mit
Map urls to different locations
Stars: ✭ 11
Programming Languages
javascript
184084 projects - #8 most used programming language
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;
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].