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 -Dyarn add html-inline-css-webpack-plugin -Dconst 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
leaveCSSFile?: boolean
replace?: {
target: string
position?: 'before' | 'after'
removeTarget?: boolean
}
attributes?: { [name: string]: string }
}filter?(fileName: string): booleanReturn 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');
},
}),
...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>
Allows the adding of attributes to the style tag
...
new HTMLInlineCSSWebpackPlugin({
replace: {
attributes: {
'type': "text/css"
},
},
}),
...<style type="text/css">
/* inlined css */
</style>...
new HTMLInlineCSSWebpackPlugin({
replace: {
attributes: {
'amp-custom': ""
},
},
}),
...<style amp-custom="">
/* inlined css */
</style>Useful for amp pages
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>