Javascript 使用网页包生成的类名呈现静态html

我试图让Webpack呈现静态html并导出相关css，从使用HtmlWebpackPlugin的pug模板和css模块开始。
我的设置如下

//webpack.config.js

...

plugins: [
    new CleanWebpackPlugin(),

    new HtmlWebpackPlugin({
        template: "src/templates/index.pug",
        excludeChunks: ["landing", "runtime"],
        excludeAssets: [/index.*.js/]
    })

    new HtmlWebpackExcludeAssetsPlugin(),

    new MiniCssExtractPlugin({
        filename: "[name].[contenthash].css",
        chunkFilename: "[name].[contenthash].css"
    })
]
module: {
    rules: [
        /**
         * pug
         */
        {
            test: /\.pug$/,
            exclude: /node_modules/,
            use: ["pug-loader"]
        },

        /**
         * scss
         */
        {
            test: /\.scss$/,
            exclude: /node_modules|_.+.scss/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        hmr: process.env.NODE_ENV === "development"
                    }
                },
                {
                    loader: "css-loader",
                    options: {
                        modules: true,
                        localsConvention: "camelCase",
                        sourceMap: true
                    }
                },
                "postcss-loader",
                "sass-loader"
            ]
        }
    ]
}

...

然后在我的index.pug文件中，我想做如下操作：

- var styles = require("../styles/style.module.scss")

div(class=styles.someClass)

问题是，如果我保持配置不变，那么

ERROR in ./src/styles/style.module.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[MODULE_TYPE] is not a function

通过执行以下操作，我成功地在pug模板中正确地获得了转换后的类名

/**
 * scss
 */
{
    test: /\.scss$/,
    exclude: /node_modules|_.+.scss/,
    use: [
        //{
        //    loader: MiniCssExtractPlugin.loader,
        //    options: {
        //        hmr: process.env.NODE_ENV === "development"
        //    }
        //},
        {
            loader: "css-loader",
            options: {
                modules: true,
                localsConvention: "camelCase",
                sourceMap: true,
                onlyLocals: true <=====
            }
        },
        "postcss-loader",
        "sass-loader"
    ]
}

---

本以为

模板（局部变量）

会将局部变量注入到模板中，但我可能误解了，因为返回的html具有未更改的类名称，因此问题仍然存在。

刚刚发现，只需内联应用于pug模板的加载程序

- var styles = require("!css-loader?modules&onlyLocals&localsConvention=camelCase!postcss-loader!sass-loader!../styles/style.module.scss")

并具有用于导出css文件的网页包配置

entry: {
    index: ["./src/styles/style.module.scss"]
},
module: {
    rules: [
        /**
        * scss
        */
        {
            test: /\.scss$/,
            exclude: /node_modules|_.+.scss/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        hmr: process.env.NODE_ENV === "development"
                    }
                },
                {
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                },
                "postcss-loader",
                "sass-loader"
            ]
        }
    ]
},

---

如果有人知道更好的利用源代码映射的解决方案，请发布。

为什么不创建一个javascript入口点，然后导入其中的css文件？这是一种比从pug模板导入文件更常用的方法。因为我需要从pug模板访问生成的类名。如果你知道一种更好的方式，我很乐意考虑替代方案。我现在了解你的需求。我从未将css模块与定制的网页包配置一起使用过。必须需要scss文件，然后为每个模板注入类名是一件乏味的事情。我还没有找到任何网页包插件来实现自动化，但是创建一个在css loader/minicssextractplugin和htmlwebpackplugin之间切换的插件应该不难。谢谢。谢谢，我也在尝试。这对于ejs模板来说是可以的。谢谢你，也许，这是唯一的办法。

entry: {
    index: ["./src/styles/style.module.scss"]
},
module: {
    rules: [
        /**
        * scss
        */
        {
            test: /\.scss$/,
            exclude: /node_modules|_.+.scss/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        hmr: process.env.NODE_ENV === "development"
                    }
                },
                {
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                },
                "postcss-loader",
                "sass-loader"
            ]
        }
    ]
},