Key requirement for both Webpack versions
It appears that both plugins operate within a specific webpack bundling lifecycle dictated by the presence of the mini-css-extract-plugin. This means you cannot utilize style-loader; instead, consider using html-webpack-plugin.
The following snippet demonstrates how your webpack.config.ts file should look like. Remember to set optimization.minimize to true for it to function even during development.
import type Webpack from "webpack";
import HtmlBundler from "html-webpack-plugin";
import CssExtractor from "mini-css-extract-plugin";
// For webpack@5
import CssMinimizer from "css-minimizer-webpack-plugin";
// For webpack versions under 5
import CssMinimizer from "optimize-css-assets-webpack-plugin";
const config: Webpack.Configuration = {
...
plugins: [
new HtmlBundler({
template: "yourHtmlTemplate.html"
});
new CssExtractor({
filename: "outputCssFilename.css",
}),
],
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: [
CssExtractor.loader,
"css-loader",
"resolve-url-loader",
"sass-loader",
]
},
],
},
optimization: {
minimize: true, // set true to run minimizers also in development
minimizer: [
new CssMinimizer(),
],
},
};
export default config;