html-inline-css-webpack-plugin
1.11.2 • Public • Publishedhtml-inline-css-webpack-plugin
Convert external stylesheet to embedded stylesheet, aka document stylesheet.
<link rel="stylesheet" /> => <style>...<style/>Requiremini-css-extract-plugin andhtml-webpack-plugin
Install
NPM
npm i html-inline-css-webpack-plugin -D
Yarn
yarn add html-inline-css-webpack-plugin -D
Minimal example
constMiniCssExtractPlugin=require("mini-css-extract-plugin");constHtmlWebpackPlugin=require('html-webpack-plugin');constHTMLInlineCSSWebpackPlugin=require("html-inline-css-webpack-plugin").default;module.exports={plugins:[newMiniCssExtractPlugin({filename:"[name].css",chunkFilename:"[id].css"}),newHtmlWebpackPlugin(),newHTMLInlineCSSWebpackPlugin(),],module:{rules:[{test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}]}}
Config
interfaceConfig{filter?:(fileName:string)=>booleanstyleTagFactory?:(params:{style:string})=>stringleaveCSSFile?:booleanreplace?:{target:stringposition?:'before'|'after'removeTarget?:boolean}}
filter(optional)
filter?:(fileName:string)=>boolean
Returntrue to make current file internal, otherwise ignore current file. Include both css file and html file name.
example
...newHTMLInlineCSSWebpackPlugin({filter(fileName){returnfileName.includes('main');},}),...
styleTagFactory(optional)
styleTagFactory?:(params:{style:string})=>string
Used to customize the style tag.
example
...newHTMLInlineCSSWebpackPlugin({styleTagFactory({ style}){return`<style type="text/css">${style}</style>`;},}),...
leaveCSSFile(optional)
iftrue, it will leave CSS files where they are when inlining
replace(optional)
replace?:{ target:string position?:'before'|'after'// default is 'before' removeTarget?:boolean// default is false}
A config for customizing the location of injection, default will add internal style sheet before the</head>
target
A target for adding the internal style sheet
position(optional)
Add internal style sheetbefore/after thetarget
removeTarget(optional)
iftrue, it will remove thetarget from the output HTML
Please note that HTML comment is removed by default by the
html-webpack-pluginin production mode.#16
example
<head><!-- inline_css_plugin --><style>/* some hard code style */</style></head>
...newHTMLInlineCSSWebpackPlugin({replace:{removeTarget:true,target:'<!-- inline_css_plugin -->',},}),...
output:
<head><style>/* style from *.css files */</style><style>/* some hard code style */</style></head>
Package Sidebar
Install
npm i html-inline-css-webpack-plugin
Weekly Downloads
29,912
Version
1.11.2
License
MIT
Unpacked Size
31.8 kB
Total Files
25