How to automatically add css imports in all generated html files? - html

Question

I'm generating multiples *.html files in the dist folder of my project (copied with file-loader). The import of styles.css (generated from scss files from my src folder) is present in the generated index.html but not in the other generated html files which are located in my src/pages (and also generated in the dist folder).
How can I add the styles.css import in all generated html files or even better in all targeted html files?
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); // to minify JS
module.exports = {
entry: ['#babel/polyfill', './src/js/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
optimization: {
//https://webpack.js.org/plugins/mini-css-extract-plugin/
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
output: {
comments: /#license/i,
},
},
extractComments: false,
}),
new OptimizeCSSAssetsPlugin({})
], // utilisés pour minifier le css généré en Production
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.s[ac]ss$/i,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: false
}
}),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new CopyPlugin([
{ from: './src/assets/images', to: 'assets/images' },
//{ from: 'other', to: 'public' },
]),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(html)$/i,
loader: 'html-loader',
options: {
attributes: false,
interpolate: true,
},
},
{
test: /\.s[ac]ss$/i,
use: [
{loader: MiniCssExtractPlugin.loader},
//'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader',
'sass-loader',
],
},
{
test: /\.svg/,
use: {
loader: 'svg-url-loader',
options: {}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images',
esModule: false,
}
}
]
},
{
test: /\.html$/,
loader: 'file-loader',
options: {
name: '[name].[ext]'
},
exclude: [
path.resolve(__dirname, 'src/index.html'),
path.resolve(__dirname, 'src/fragments')
]
},
]
}
};
Thank in advance for your help.