rspack

Rspacks' CssExtractPlugin loader not extracting CSS as expected?


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. html code instead of css

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.

imports

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.


Solution

  • I was using @rspack/core: 1.0.8, now I am using the latest release of 1.0.10 which fixed my issue.