MIT Licence PRs Welcome Total downloads npm version
Convert external stylesheet to embedded stylesheet, aka document stylesheet.
<link rel="stylesheet" /> => <style>...<style/>
Require mini-css-extract-plugin and html-webpack-plugin
npm i html-inline-css-webpack-plugin -D
yarn add html-inline-css-webpack-plugin -D
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default; module.exports = { plugins: [ new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }), new HtmlWebpackPlugin(), new HTMLInlineCSSWebpackPlugin(), ], module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader" ] } ] } }
interface Config { filter?: (fileName: string) => boolean styleTagFactory?: (params: { style: string }) => string leaveCSSFile?: boolean replace?: { target: string position?: 'before' | 'after' removeTarget?: boolean } }
filter?: (fileName: string) => boolean
Return true to make current file internal, otherwise ignore current file. Include both css file and html file name.
... new HTMLInlineCSSWebpackPlugin({ filter(fileName) { return fileName.includes('main'); }, }), ...
styleTagFactory?: (params: { style: string }) => string
Used to customize the style tag.
... new HTMLInlineCSSWebpackPlugin({ styleTagFactory({ style }) { return `<style type="text/css">${style}</style>`; }, }), ...
if true, it will leave CSS files where they are when inlining
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>
A target for adding the internal style sheet
Add internal style sheet before/after the target
if true, it will remove the target from the output HTML
Please note that HTML comment is removed by default by the
html-webpack-pluginin production mode. #16
<head> <!-- inline_css_plugin --> <style> /* some hard code style */ </style> </head>
... new HTMLInlineCSSWebpackPlugin({ replace: { removeTarget: true, target: '<!-- inline_css_plugin -->', }, }), ...
<head> <style> /* style from *.css files */ </style> <style> /* some hard code style */ </style> </head>