Cachebusting all local files in css
npm install postcss-cachebuster[PostCSS] plugin added cachebuster to local files based on their datechanged.
css
@import url("/css/styles.css");
.foo {
background-image : url('../images/index/logo.png');
behavior : url('../behaviors/backgroundsize.min.htc');
}
@font-face {
font-family: 'My font';
src: url('fonts/myfont.ttf');
}
`Output css example
`css
@import url("/css/styles.css?v66f22a33fff");
.foo {
background-image : url('../images/index/logo.png?v14f32a475b8')
behavior : url('../behaviors/backgroundsize.min.htc?v15f55a666c2');
}
@font-face {
font-family: 'My font';
src: url('fonts/myfont.ttf?v32f14a88dcf');
}
`Configure
`js
postcss([
require('postcss-cachebuster')({
imagesPath : '/images',
cssPath : '/stylesheets'
})
])
`
See [PostCSS] docs for examples for your environment.Options
-
cssPath - option to redefine relative images resolving directory (by default the same as css file folder)
- imagesPath - variable to define absolute images base path
- type - define cachebuster type, mtime by default, allows: mtime, checksum` (checksum based on md5),