https://github.com/Runjuu/html-inline-css-webpack-plugin
Fork of:html-inline-css-webpack-plugin
Convert external stylesheet to embedded stylesheet, aka document stylesheet.
<link rel="stylesheet" /> => <style>...<style/>
Require mini-css-extract-plugin and html-webpack-plugin
Install
NPM
npm i html-inline-css-webpack-plugin -D
Yarn
yarn add html-inline-css-webpack-plugin -D
Minimal example
const MiniCssExtractPlugin = ;const HtmlWebpackPlugin = ;const HTMLInlineCSSWebpackPlugin = default; moduleexports = plugins: filename: "[name].css" chunkFilename: "[id].css" module: rules: test: /\.css$/ use: MiniCssExtractPluginloader "css-loader"
Config
filter(optional)
filter?
Return true
to make current file internal, otherwise ignore current file.
example
... new HTMLInlineCSSWebpackPlugin,...
replace(optional)
replace?:
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 sheet before
/after
the target
removeTarget(optional)
if true
, it will remove the target
from the output HTML
leaveCssFile(optional)
if true
, it will leave CSS files where they are when inlining
example
<!-- inline_css_plugin -->
... new HTMLInlineCSSWebpackPlugin,...
output: