Is it possible to have html-webpack-plugin generate <style> elements from css?
I have a static site where I am using Vue and Webpack.
I have some global CSS rules in a file called style.css and I am importing them by using import './styles.css' from my index.js file. Additionally, I have some .vue files which generate their own CSS.
To generate the HTML page, I am using html-webpack-plugin.
My CSS rules appear to be applying correctly. However, the <style> tags which contain them are dynamically being added to the <head> of my page via the Javascript that Webpack generates. I would prefer these <style> tags to appear statically in the generated index.html file instead. Is there any way to achieve this?
Additionally, if possible, I would like the CSS to be minified.
This is my webpack configuration file:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
mode: 'development'
};
Answer
Sounds like the exact use case for these html-webpack plugins:
html-webpack-inline-source-plugin:
It allows you to embed javascript and css source inline.
style-ext-html-webpack-plugin: an alternative to the previous one.
If you use HtmlWebpackPlugin and ExtractTextPlugin in your Webpack builds to create HTML
<link>s to external stylesheet files, add this plugin to convert the links to `~ elements containing internal (sometimes incorrectly called 'in-line') CSS.html-inline-css-webpack-plugin: an alternative to style-ext-html-webpack-plugin.
Convert external style sheet(
<link rel="stylesheet"/>) to internal style sheet(<style>...<style/>). Require mini-css-extract-plugin and html-webpack-plugin
The last 2 HTML webpack plugins depend on one of the following webpack plugins:
-
Extract text from a bundle, or bundles, into a separate file. [...] It moves all the required
*.cssmodules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css). mini-css-extract-plugin: same as Extract Text Plugin, but for webpack v4.
This plugin extracts CSS into separate files.