postcss inline

Postcss Inline

POSTCSS -Plugin, das Bilder und Schriftarten als Daten -URIs in Ihr CSS einbringt. (Basierend auf Postcss -Bild inline)

Verschmolzen in Postcss-URL

Die Merkmale von Postcss-Inline wurden in Postcss-URL zusammengefasst

Veraltet

 @font-face {
  font-family : 'MyWebFont' ;
  src : url ( 'webfont.woff' ) format ( 'woff' );
}
. foo {
    background-image : url (one_pixel_transparent.gif);
}
. bar {
    background : url (one_pixel_transparent.gif);
}

 @font-face {
  font-family : 'MyWebFont' ;
  src : url ( 'data:application/x-font-woff;base64,AACH5BAEAAAAALA...==' ) format ( 'woff' );
}
. foo {
    background-image : url (data:image/gif;base64 , R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}
. bar {
    background : url (data:image/gif;base64 , R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}

Verwendung

 postcss ( [ require ( 'postcss-inline' ) ] ) 

 // Inline only woff files:
postcss ( [ require ( 'postcss-inline' ) ( { filter : / .woff$ / } ) ] ) 

 // Specify the base path for the assets
postcss ( [ require ( 'postcss-inline' ) ( { basePath : '/some/path' } ) ] ) 

 // Delete assets after inline (use with care!)
postcss ( [ require ( 'postcss-inline' ) ( { deleteAsset : true } ) ] )

Beispiele für Ihre Umgebung finden Sie in PostCSS -Dokumenten.