Some css files which are created by Rspacks' CssExtractPlugin
have HTML code from my template.html provided to the html-webpack-plugin
instead of CSS.
I have also observed a pattern with this problem. Whenever I provide the filename
, chunkFilename
as options to the CssExtractPlugin
I am facing the above problem.
when I don't specify filename
, chunkFilename
as options to the CssExtractPlugin
. The CSS files are constructed properly containing the necessary css code .
Here is my CssExtractPlugin
definition:
const cssExtract = new CssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[name].[contenthash].css',
});
Here are my css loaders configurations:
const CssExtractPlugin = rspack.CssExtractRspackPlugin;
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap,
},
};
const postcssLoader = {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'autoprefixer',
],
},
sourceMap,
},
};
const css = {
test: /\.css$/,
use: [
CssExtractPlugin.loader,
cssLoader,
postcssLoader,
],
type: 'javascript/auto',
};
const sass = {
test: /\.s[c|a]ss$/,
use: [
CssExtractPlugin.loader,
cssLoader,
postcssLoader,
{
loader: 'sass-loader',
options: {
sourceMap,
sassOptions: {
importer: jsonImporter({
convertCase: true,
}),
},
},
},
],
type: 'javascript/auto',
};
And here we can see in the sources tab, where the HTML code is present inside the css file.
The files colored in purple are the CSS files.
These are the imports for the page in question, for which the styles are not being loaded properly.
All the styles imported in this file are not loaded. The only styles being loaded are of bootstrap, for which the import statement is not present in this file. All the CSS files created for this particular file contain the HTML from template.html instead of the CSS.
I was using @rspack/core: 1.0.8
, now I am using the latest release of 1.0.10
which fixed my issue.