Rspacks 的 CssExtractPlugin 加载器未按预期提取 CSS？

Question

由 Rspacks'

CssExtractPlugin

创建的一些 css 文件将我的 template.html 中的 HTML 代码提供给

html-webpack-plugin

，而不是 CSS。

我还观察到了这个问题的模式。每当我提供

filename

、

chunkFilename

作为

CssExtractPlugin

的选项时，我都会面临上述问题。

当我没有指定

filename

时，

chunkFilename

作为

CssExtractPlugin

的选项。 CSS 文件已正确构建，包含必要的 CSS 代码。

这是我的

CssExtractPlugin

定义：

const cssExtract = new CssExtractPlugin({
  filename: '[name].[contenthash].css',
  chunkFilename: '[id].[name].[contenthash].css',
});

这是我的 css 加载器配置：

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',
};

在这里我们可以在“源”选项卡中看到 HTML 代码存在于 css 文件中。

紫色的文件是CSS文件。

这些是相关页面的导入，其样式未正确加载。

此文件中导入的所有样式都不会加载。唯一加载的样式是 bootstrap 样式，该文件中不存在导入语句。为此特定文件创建的所有 CSS 文件都包含 template.html 中的 HTML，而不是 CSS。

Answer 1

我之前使用的是

@rspack/core: 1.0.8

，现在我使用的是最新版本的

1.0.10

，它解决了我的问题。