postcss inline

PostCSSインライン

画像とフォントをデータURIとしてCSSに配置するPostCSSプラグイン。 （PostCSS画像のインラインに基づく）

postcss-urlにマージされました

PostCSS-Inlineの特徴は、PostCSS-URLに統合されました

非推奨

 @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==);
}

使用法

 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 } ) ] )

環境の例については、PostCSSドキュメントを参照してください。