无法从模板访问htmlWebpackPlugin.files数据

Question

我正在尝试从Pug模板访问htmlWebpackPlugin.files.css，但由于未定义，因此构建失败。

我希望可以为每个CSS文件插入一个link标签。有人可以告诉我为什么我的哈巴狗模板看不到数据，如自述文件（https://github.com/jantimon/html-webpack-plugin）所述吗？

这是我的webpack.config.js文件的当前内容：

const path = require('path');
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = env => {
    return {
        mode: env.mode,
        entry: {
            vendor: ['jquery', 'jquery-ui', 'jquery-validation', 'js-cookie', 'qtip2'],
            bundle: './src/scripts/bundle.js',
            global: './src/scripts/global.js',
            index: [
                './src/index.js',
                './src/scripts/branch.js'
            ],
            maincss: './src/scss/main.scss',
        },
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: '[name]-[hash].js',
            chunkFilename: '[name]-[chunkhash].js'
        },
        devtool: 'inline-source-map',
        devServer: {
            contentBase: './build'
        },
        plugins: [
            new CleanWebpackPlugin(['build']),
            new MiniCssExtractPlugin({
                path: 'build/Styles',
                filename: '[name]-[hash].css',
                chunkFilename: '[name]-[chunkhash].css'
            }),
            new HtmlWebpackPlugin({
                inject: false,
                title: "Home Page",
                filename: "home.html",
                chunks: ['vendor', 'bundle'],
                template: './src/templates/home.html'
            }),
            new HtmlWebpackPlugin({
                inject: false,
                title: "Branch Page",
                filename: "branch.html",
                chunks: ['vendor', 'bundle', 'branch'],
                template: './src/templates/branch.html'
            }),
            new HtmlWebpackPlugin({
                // inject: false,
                filename: 'basket.html',
                template: 'src/basket.pug',
                chunks: ['vendor', 'bundle', 'maincss']
            })
        ],
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                name: 'Styles/[name]-[hash].css',
                            }
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                },
                {
                    test: /\.pug$/,
                    use: ['html-loader?attrs=false', 'pug-html-loader']
                }
            ]
        }
    }
}

这是导致生成错误的layout.pug文件：

doctype html
html
  head
    title I'm a title
    each css in htmlWebpackPlugin.files.css
      link(href=css rel="stylesheet")
  body
    block header
      include includes/header
    block content
    block footer
    include includes/footer
    each js in htmlWebpackPlugin.files.js
      script(src=js)